前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter基础widgets教程-BottomNavigationBar篇

Flutter基础widgets教程-BottomNavigationBar篇

原创
作者头像
青年码农
发布2020-10-10 15:42:15
1.6K0
发布2020-10-10 15:42:15
举报
文章被收录于专栏:青年码农

1 BottomNavigationBar

显示在应用程序的底部,用于在少量视图中进行选择,通常在三到五之间。

2 构造函数

代码语言:txt
复制
BottomNavigationBar({
    Key key, 
    @required List<BottomNavigationBarItem> items, 
    ValueChanged<int> onTap, 
    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:背景颜色

代码语言:txt
复制
backgroundColor: Colors.white,

3.2 currentIndex:项目索引

代码语言:txt
复制
currentIndex:0,

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

代码语言:txt
复制
elevation:8.0,

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

代码语言:txt
复制
fixedColor:Colors.green,

3.5 iconSize:所有BottomNavigationBarItem图标的大小

代码语言:txt
复制
iconSize: 24.0,

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

代码语言:txt
复制
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标签的字体大小

代码语言:txt
复制
selectedFontSize: 24.0,

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

代码语言:txt
复制
selectedItemColor: Colors.green,

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

代码语言:txt
复制
showSelectedLabels: true,

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

代码语言:txt
复制
showUnselectedLabels: true,

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

代码语言:txt
复制
unselectedFontSize: 12.0,

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

代码语言:txt
复制
unselectedItemColor: Colors.green,

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1 BottomNavigationBar
  • 2 构造函数
  • 3 常用属性
    • 3.1 backgroundColor:背景颜色
      • 3.2 currentIndex:项目索引
        • 3.3 elevation :底部导航栏的Z坐标
          • 3.4 fixedColor:选中项目颜色的值(只读)
            • 3.5 iconSize:所有BottomNavigationBarItem图标的大小
              • 3.6 items:定义在底部导航栏中排列的按钮项的外观
                • 3.7 selectedFontSize:选中时BottomNavigationBarItem标签的字体大小
                  • 3.8 selectedItemColor:选中时BottomNavigationBarItem.icon和BottomNavigationBarItem.label的颜色
                    • 3.9 showSelectedLabels:是否为未选择的BottomNavigationBarItems显示标签
                      • 3.10 showUnselectedLabels:是否为选定的BottomNavigationBarItem显示标签
                        • 3.11 unselectedFontSize:未选中BottomNavigationBarItem标签的字体大小
                          • 3.12 unselectedItemColor:未选中的BottomNavigationBarItem.icon和BottomNavigationBarItem.labels的颜色
                          领券
                          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档