BottomNavigationBar 自定义 底部导航条、以及实现页面切换
一、Flutter BottomNavigationBar 组件
BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Scaffold 组件的参数。
BottomNavigationBar 常见的属性
属性名 | 说明 |
items | List<BottomNavigationBarItem> 底部导航条按钮集合 |
iconSize | icon |
currentIndex | 默认选中第几个 |
onTap | 选中变化回调函数 |
fixedColor | 选中的颜色 |
type |
BottomNavigationBarType.fixed BottomNavigationBarType.shifting |
Scaffold( appBar: AppBar( title: Text('Flutter Demo') ), body: this._pagesList[this._curentIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: _curentIndex, onTap: _changePage, fixedColor: Colors.black, type: BottomNavigationBarType.fixed, items: [ BottomNavigationBarItem( title:Text("首页"), icon:Icon(Icons.home) ), BottomNavigationBarItem( title:Text("分类"), icon:Icon(Icons.category) ), BottomNavigationBarItem( title:Text("设置"), icon:Icon(Icons.settings) ), ], ), )
posted on 2021-11-07 20:37 JieFangZhe 阅读(274) 评论(0) 编辑 收藏 举报