flutter之BottomNavigationBar-阿里云开发者社区

flutter之BottomNavigationBar

2022-05-16 128

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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('设置'),
    ),
],