flutter实现底部导航栏
作者:伟雪无痕 发布时间:2023-08-23 01:06:13
标签:flutter,导航栏
本文实例为大家分享了flutter实现底部导航栏的具体代码,供大家参考,具体内容如下
一.flutter底部导航栏常用组件BottomNavigationBar 属性介绍
BottomNavigationBar({
Key? key,
required this.items, //必填项,设置各个按钮
this.onTap, //点击事件
this.currentIndex = 0, //当前选中item下标
this.elevation, //控制阴影高度
this.type, //BottomNavigationBarType,默认 fixed,设置为 shifting 时,需要设置选中样式,和未选中样式,提供一个特殊动画
Color? fixedColor, //选中 item 填充色
this.backgroundColor, //整个BottomNavigationBar 背景色
this.iconSize = 24.0, //图标大小
Color? selectedItemColor, //选中title填充色
this.unselectedItemColor, //未选中title填充色
this.selectedIconTheme, //选中item图标主题
this.unselectedIconTheme, //未选中item图标主题
this.selectedFontSize = 14.0, //选中title字体大小
this.unselectedFontSize = 12.0, //未选中title字体大小
this.selectedLabelStyle, //选中title样式 TextStyle
this.unselectedLabelStyle, //未选中title样式 TextStyle
this.showSelectedLabels, //是否展示选中title,默认为true
this.showUnselectedLabels, //是否展示未选中title,默认为true
this.mouseCursor, //鼠标悬停
this.enableFeedback,
this.landscapeLayout,
})
二.BottomNavigationBar的具体实现
1.创建四个页面,分别为,首页,通讯录,发现和我的,这里以homepage.dart为例,其他页面只需要修改对应内容显示即可,eg:
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget{
const HomePage({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState()=>_HomePageState();
}
class _HomePageState extends State<HomePage>{
@override
Widget build(BuildContext context) {
return const Center(
child: Text(
"主页",
style:TextStyle(
color: Colors.black,
fontSize: 20
),
),
);
}
}
2.添加BottomNavigationBar,需要在主页中实现BottomNavigationBar,eg:
import 'package:flutter/material.dart';
import 'findpage.dart';
import 'mypage.dart';
import 'contactpage.dart';
import 'homepage.dart';
class MainPage extends StatefulWidget{
const MainPage({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState()=>_MainPageState();
}
class _MainPageState extends State<MainPage>{
var allPages=[HomePage(),ContactPage(),FindPage(),MyPage()];
var currentIndex=0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"导航栏",
style: TextStyle(
color: Colors.black,
fontSize: 30,
),
textAlign: TextAlign.center,
),
),
body: allPages[currentIndex],
backgroundColor: Colors.green,
bottomNavigationBar: BottomNavigationBar(
currentIndex: currentIndex,
type: BottomNavigationBarType.fixed,
unselectedItemColor: Colors.grey,
selectedItemColor: Colors.blue,
/*unselectedLabelStyle:TextStyle(
color: Colors.black
),*/
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: "首页",
//backgroundColor:Colors.blue
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: "通讯录",
//backgroundColor:Colors.blue
),
BottomNavigationBarItem(
icon: Icon(Icons.find_in_page),
label: "发现",
//backgroundColor:Colors.blue
),
BottomNavigationBarItem(
icon: Icon(Icons.flip_outlined),
label: "我的",
//backgroundColor:Colors.blue
),
],
onTap: (index){
setState(() {
print("the index is :$index");
currentIndex=index;
});
},
),
);
}
}
三.实际效果展示,eg:
来源:https://blog.csdn.net/j086924/article/details/122347292
0
投稿
猜你喜欢
- 一、什么是状态管理大到整个app的状态,用户使用app是登录状态,还是游客状态;小到一个按钮的状态,按钮是点击选中状态还是未点击状态等等,这
- 引言设计: 嗯? 这个图片点击跳转进详情再返回图片怎么变白闪一下呢?产品: 是啊是啊! 一定是个bug开发: 囧囧囧在开发过程中, 也许你也
- 背景今天面试字节算法岗时被问到的问题,让我用C++实现一个softmax函数。softmax是逻辑回归在多分类问题上的推广。大概的公式如下:
- 1、volley 项目地址 https://github.com/smanikandan14/Volley-demo (1)&nb
- 实例如下:import java.lang.reflect.Field;import java.lang.reflect.Invocatio
- 前言工作中使用mybatis时我们需要根据数据表字段创建pojo类、mapper文件以及dao类,并且需要配置它们之间的依赖关系,这样的工作
- 本文实例为大家分享了Java实现简单邮件发送的具体代码,供大家参考,具体内容如下需要的jar包:activation-1.1.1.jarma
- 示例 1 :使用搜索表单创建全屏模式我们要构建的小应用程序有一个应用程序栏,右侧有一个搜索按钮。按下此按钮时,将出现一个全屏模式对话框。它不
- 如下所示://view重绘时回调view.getViewTreeObserver().addOnDrawListener(new OnDra
- 通用配置#下面介绍的整合JDBC和整合MyBatis都需要添加的实体类和配置数据库表#CREATE TABLE `user` ( `id`
- 前言目前Flutter三大主流状态管理框架分别是provider、flutter_bloc、getx,三大状态管理框架各有优劣,本篇文章将介
- 实现要求1、使用Java图形界面组件设计软件,界面如图所示。2、软件能够满足基本的“加、减、乘、除"等运算要求。3、程序代码清晰,
- 字段策略 0:”忽略判断”,1:”非 NULL 判断”),2:”非空判断”问题描述:当字段策略为 0 “忽略判断” 的时候,如果实体和数据库
- Spring对配置类的处理主要分为2个阶段配置类解析阶段会得到一批配置类的信息,和一些需要注册的beanbean注册阶段将配置类解析阶段得到
- 声明:下面的实例全部在linux下尝试,window下未尝试。有兴趣者可以试一下。文章针c初学者。c语言的强符号和弱符号是c初学者经常容易犯
- 本文实例讲述了Android TextView中文字通过SpannableString设置属性的方法。分享给大家供大家参考,具体如下:在An
- 1,添加依赖在project的build.gradle文件中添加dependencies { classpath 'co
- springboot + docker + jenkins自动化部署项目,jenkins、mysql、redis都是docker运行的,并且
- 在分支较多的时候,switch的效率比if高,在反汇编中我们即可看到效率高的原因一、switch语句1、在正向编码时,switch语句可以看
- 一、获取android工程里面的各种资源的id; 1.1 string型 比如下面: << string name=”OK”&g