Flutter BottomNavigationBar 组件

目录

参数详解

 代码示例

效果图

完整代码

---

 

参数详解

属性	说明
type	风格 BottomNavigationBarType.fixed（超过4个按键一定要加这个，说明是多个按钮） BottomNavigationBarType.shifting
items	List<BottomNavigationBarItem>[]   底部导航条按钮集合
onTap	选中变化回调函数
currentIndex	索引值，默认0   默认选中第几个
elevation	默认8
iconSize	图片大小
BottomNavigationBarType.fixed  风格属性
fixedColor	选中的颜色
backgroundColor	背景颜色
BottomNavigationBarType.shifting  风格属性
selectedItemColor	选中时颜色
unselectedItemColor	未选中时颜色
selectedIconTheme
unselectedIconTheme
selectedFontSize	默认14
unselectedFontSize	默认12
selectedLabelStyle
unselectedLabelStyle
showSelectedLabels	默认true
showUnselectedLabels

BottomNavigationBarItem 

属性	说明
icon	图标
title	文字
activeIcon	选中后的图标
backgroundColor	背景色

 代码示例

简单的应用代码如下：

bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('首页')
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text('分类')
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text('设置')
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.account_circle),
              title: Text('我的')
            ),
        ],
      ),

可以互动的BottomNavigationBar请见完整代码

效果图

              

完整代码

查看完整代码