Flutter BottomNavigationBar 组件

目录

参数详解

 代码示例

效果图

完整代码


 

参数详解

属性 说明
type

风格

BottomNavigationBarType.fixed(超过4个按键一定要加这个,说明是多个按钮

BottomNavigationBarType.shifting

items List[]   底部导航条按钮集合
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(
              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请见完整代码

效果图

Flutter BottomNavigationBar 组件_第1张图片              Flutter BottomNavigationBar 组件_第2张图片

完整代码

查看完整代码 

你可能感兴趣的:(Flutter,基础)