flutter之BottomNavigationBar

简介: flutter之BottomNavigationBar

1 BottomNavigationBar

BottomNavigationBar即是底部导航栏控件,显示在页面底部的设计控件,用于在试图切换,底部导航栏包含多个标签、图标或者两者搭配的形式,简而言之提供了顶级视图之间的快速导航。

2 构造函数

BottomNavigationBar({
    Key key, 
    @required List<BottomNavigationBarItemitems, 
    ValueChanged<intonTap, 
    int currentIndex: 0, 
    double elevation: 8.0, 
    BottomNavigationBarType type, 
    Color fixedColor, 
    Color backgroundColor, 
    double iconSize: 24.0, 
    Color selectedItemColor, 
    Color unselectedItemColor, 
    double selectedFontSize: 14.0, 
    double unselectedFontSize: 12.0, 
    bool showSelectedLabels: true, 
    bool showUnselectedLabels 
})

3 常用属性

3.1 backgroundColor:背景颜色

backgroundColor: Colors.white,

3.2 currentIndex:项目索引

currentIndex:0,

3.3 elevation :底部导航栏的Z坐标

elevation:8.0,

3.4 fixedColor:选中项目颜色的值(只读)

fixedColor:Colors.green,

3.5 iconSize:所有BottomNavigationBarItem图标的大小

iconSize: 24.0,

3.6 items:定义在底部导航栏中排列的按钮项的外观

items: [
    BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text('首页'),
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.category),
        title: Text('分类'),
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.settings),
        title: Text('设置'),
    ),
],

3.7 selectedFontSize:选中时BottomNavigationBarItem标签的字体大小

selectedFontSize: 24.0,

3.8 selectedItemColor:选中时BottomNavigationBarItem.icon和BottomNavigationBarItem.label的颜色

selectedItemColor: Colors.green,

3.9 showSelectedLabels:是否为未选择的BottomNavigationBarItems显示标签

showSelectedLabels: true,

3.10 showUnselectedLabels:是否为选定的BottomNavigationBarItem显示标签

showUnselectedLabels: true,

3.11 unselectedFontSize:未选中BottomNavigationBarItem标签的字体大小

unselectedFontSize: 12.0,

3.12 unselectedItemColor:未选中的BottomNavigationBarItem.icon和BottomNavigationBarItem.labels的颜色

unselectedItemColor: Colors.green,
相关文章
Flutter 底部导航栏BottomNavigationBar,并关联PageView实现滑动切换
Flutter 底部导航栏BottomNavigationBar,并关联PageView实现滑动切换
375 0
|
移动开发 Android开发 索引
flutter之从零开始搭建(一)之 BottomNavigationBar
flutter之从零开始搭建(一)之 BottomNavigationBar
227 0
flutter之从零开始搭建(一)之 BottomNavigationBar
Flutter BottomNavigationBar不显示(显示白色)?
Flutter BottomNavigationBar不显示(显示白色)?
226 0
Flutter BottomNavigationBar不显示(显示白色)?
|
索引
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(一)
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(一)
378 0
|
Dart 开发者
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(二)
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(二)
176 0
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(二)
|
Dart 开发者
【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )(二)
【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )(二)
397 0
【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )(二)
|
索引
Flutter基础widgets教程-BottomNavigationBar篇
Flutter基础widgets教程-BottomNavigationBar篇
245 0
|
数据可视化 API 索引
【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )(一)
【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )(一)
829 0
Flutter:让BottomNavigationBar保持状态
版本所有,转载请注明出处。 @有问题。 如果有关注过我的同学可能看过我之前的一篇名为Flutter学习笔记:BottomNavigationBar实现多个Navigation的文章,这篇文章主要是介绍了通过Navigation实现保持住让BottomNavigationBar页面的状态,从而避免在BottomNavigationBar切换时导致页面重新initState。
2076 0
|
2月前
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
26 1

热门文章

最新文章

  • 1
    【Flutter 开发必备】AzListView 组件全解析,打造丝滑索引列表!
    41
  • 2
    flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
    40
  • 3
    通过外部链接启动 Flutter App(详细介绍及示例)
    39
  • 4
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    213
  • 5
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    112
  • 6
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    77
  • 7
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    188
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    62
  • 9
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    90
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    191