flutter实现底部导航栏
作者:伟雪无痕 时间:2023-08-23 01:06:13
本文实例为大家分享了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
标签:flutter,导航栏
0
投稿
猜你喜欢
SpringCloud版本问题报错及解决方法
2023-01-29 23:19:46
轻松学习C#的装箱与拆箱
2021-07-01 12:11:51
Winform开发中使用下拉列表展示字典数据的几种方式
2022-02-23 11:56:41
SpringBoot中JPA实现Sort排序的三种方式小结
2022-02-12 23:35:12
Android中SparseArray性能优化的使用方法
2023-08-24 22:26:20
Unity实现换装系统
2021-08-11 15:27:15
Android开发Compose集成高德地图实例
2022-09-05 01:44:28
Android实现从底部弹出的Dialog示例(一)
2021-09-12 13:33:09
Java File类 mkdir 不能创建多层目录的解决
2022-12-01 09:20:18
Java 字符串转float运算 float转字符串的方法
2022-04-09 10:09:06
java发送http的get、post请求实现代码
2023-02-05 01:46:56
Java必备知识之位运算及常见进制解读
2022-02-10 00:42:19
c#实现md5加密示例
2023-04-19 16:37:11
java多线程加锁以及Condition类的使用实例解析
2023-08-07 07:25:30
如何通过指针突破C++类的访问权限
2022-01-26 14:14:58
JVM(Java虚拟机)简介(动力节点Java学院整理)
2023-11-25 06:12:12
mybatis-plus 如何判断参数是否为空并作为查询条件
2022-09-14 22:05:03
Java 高并发十: JDK8对并发的新支持详解
2022-12-02 02:43:09
Android使用TextView,设置onClick属性无效的解决方法
2022-06-27 11:32:39
Android中调用另一个Activity并返回结果(选择头像功能为例)
2022-09-08 23:43:10