目录
参数详解
属性 | 说明 |
type |
风格
BottomNavigationBarType.fixed( 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 版权协议,转载请附上原文出处链接和本声明。