Flutter 学习笔记 (一)安装及运行
Flutter 学习笔记 (二)Container组件、Text组件、图片组件
Flutter 学习笔记 (三)列表
Flutter 学习笔记 (四)Padding、Row、Column、Expanded组件
Flutter 学习笔记 (五)Stack & Align、Strack & Positioned 布局组件
Flutter 学习笔记 (六)Card、AspectRatio、CircleAvatar 组件
Flutter 学习笔记 (七)RaisedBotton、Wrap组件
Flutter 学习笔记 (八)StatefulWidget组件
Flutter 学习笔记( 九)BottomNavigationBar 组件 底部导航
Flutter 学习笔记 (十)AppBar 定义 Tab 切换
Flutter 学习笔记 (十一) Drawer 侧边栏
Flutter 学习笔记 (十二)floatingActionButton 类似闲鱼按钮
Flutter 学习笔记 (十三)TextField、Checkbox、Radio 组件
Flutter 学习笔记 (十四)时间组件
Flutter 学习笔记 (十五)flutter_swiper 轮播组件
Flutter 学习笔记 (十六)Dialog 组件
Flutter 学习笔记 (十七)网络数据请求
Flutter 学习笔记 (十八)路由跳转
BottomNavigation Bar
组件实现底部导航栏
当有4个及以上Item时,必须加上type: BottomNavigationBarType.fixed
onTap
实现点击图标效果,使用setState
可以实时渲染
每个导航设计之界面,通过List
+currentPage
更改body
的实时显示
iconSize
和fixedColor
修改图标大小和选中时的颜色
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('this is Home'),
);
}
}
class Category extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('this is Category'),
);
}
}
class Tabs extends StatefulWidget {
Tabs({Key key}) : super(key: key);
@override
_TabsState createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
int _currentIndex=0;
List _pageList=[
Home(),
Category(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'NUDT',
style: TextStyle(
fontSize: 30.0,
color: Colors.black,
),
),
),
body: this._pageList[this._currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex,
type: BottomNavigationBarType.fixed,
onTap: (int index){
setState(() {
this._currentIndex=index;
});
},
iconSize: 40,
fixedColor: Colors.blue,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('首页'),
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text('分类'),
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text('搜索'),
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text('设置'),
),
],
),
);
}
}