0
点赞
收藏
分享

微信扫一扫

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:&nbsp;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:&nbsp;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:&nbsp;24.0,

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

selectedItemColor:&nbsp;Colors.green,

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

showSelectedLabels:&nbsp;true,

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

showUnselectedLabels:&nbsp;true,

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

unselectedFontSize:&nbsp;12.0,

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

unselectedItemColor:&nbsp;Colors.green,



举报

相关推荐

0 条评论