博客

Flutter BottomNavigationBar 组件

  • Post author:
  • Post category:其他



目录


参数详解


代码示例


效果图


完整代码

参数详解

属性 说明
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请见完整代码

效果图


完整代码


查看完整代码


版权声明：本文为ruoshui_t原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。