Flutter 底部栏实现思路
使用flutter实现底部导航栏还是比较简单的，主要用到的组件是 Scaffold + BottomNavigationBar + BottomNavigationBarItem
Scaffold 可添加底部栏，BottomNavigationBar 可控制底部栏具体样式，BottomNavigationBarItem 可控制底部栏每个 item 的具体展现内容和样式
Flutter 底部栏实现步骤
创建 images 文件夹，将准备好 icon 资源 copy 进去（images文件夹与 android、ios 等同级）
在 yaml 文件中声明 icon 图片的信息
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
assets:
- images/mainTab_item01_down.png
- images/mainTab_item02_down.png
- images/mainTab_item03_down.png
- images/mainTab_item04_down.png
- images/mainTab_item01_up.png
- images/mainTab_item02_up.png
- images/mainTab_item03_up.png
- images/mainTab_item04_up.png
定义 item 相关数据
// 被点击 item 下标
int _itemIndex = 0;
// item 对应的页面
final List<Widget> _pageList = [MainHome(), MainProduct(), MainNews(), MainPersonal()];
// item 对应的名称
final List<String> _pageNameList = ["Item01","Item02","Item03","Item04"];
// item 对应的图标
final _pageIconList = [
["images/mainTab_item01_up.png","images/mainTab_item01_down.png"],
["images/mainTab_item02_up.png","images/mainTab_item02_down.png"],
["images/mainTab_item03_up.png","images/mainTab_item03_down.png"],
["images/mainTab_item04_up.png","images/mainTab_item04_down.png"]
];
初始化 Scaffold + BottomNavigationBar + BottomNavigationBarItem
@override
Widget build(BuildContext context) {
return _initWidget(context);
}
/**
* 初始化 widget
* */
Widget _initWidget(BuildContext context){
return Scaffold(
// 初始化顶部导航栏
appBar: _initTop(context),
// 初始化中间区域
body: _initContent(context),
// 初始化底部导航栏
bottomNavigationBar: _initBottom(context),
);
}
/**
* 初始化顶部导航栏
* */
AppBar _initTop(BuildContext context){
return AppBar(
title: Text(_pageNameList[_itemIndex], style: TextStyle(color:Color(0xffffffff), fontSize: 20.0),),
centerTitle: true,
backgroundColor: Color(0xff152137),
);
}
/**
* 初始化中间区域
* */
Widget _initContent(BuildContext context){
return _pageList[_itemIndex];
}
/**
* 初始化底部导航栏
* */
BottomNavigationBar _initBottom(BuildContext context){
return BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: _getItemIcon(0),
title: _getItemText(0)
),
BottomNavigationBarItem(
icon: _getItemIcon(1),
title: _getItemText(1)
),
BottomNavigationBarItem(
icon: _getItemIcon(2),
title: _getItemText(2)
),
BottomNavigationBarItem(
icon: _getItemIcon(3),
title: _getItemText(3)
),
],
type: BottomNavigationBarType.fixed,
currentIndex: _itemIndex,
onTap: _onTabItem,
);
}
运行结果
完整源码
/**
* @des 主页面底部导航栏
* @author liyongli 20190701
* */
class MainTab extends StatefulWidget {
@override
State<StatefulWidget> createState() => new MainTabState();
}
/**
* @des 主页面底部导航栏 State
* @author liyongli 20190701
* */
class MainTabState extends State<MainTab>{
@override
Widget build(BuildContext context) {
return _initWidget(context);
}
// 被点击 item 下标
int _itemIndex = 0;
// item 对应的页面
final List<Widget> _pageList = [MainHome(), MainProduct(), MainNews(), MainPersonal()];
// item 对应的名称
final List<String> _pageNameList = ["Item01","Item02","Item03","Item04"];
// item 对应的图标
final _pageIconList = [
["images/mainTab_item01_up.png","images/mainTab_item01_down.png"],
["images/mainTab_item02_up.png","images/mainTab_item02_down.png"],
["images/mainTab_item03_up.png","images/mainTab_item03_down.png"],
["images/mainTab_item04_up.png","images/mainTab_item04_down.png"]
];
/**
* 初始化 widget
* */
Widget _initWidget(BuildContext context){
return Scaffold(
// 初始化顶部导航栏
appBar: _initTop(context),
// 初始化中间区域
body: _initContent(context),
// 初始化底部导航栏
bottomNavigationBar: _initBottom(context),
);
}
/**
* 初始化顶部导航栏
* */
AppBar _initTop(BuildContext context){
return AppBar(
title: Text(_pageNameList[_itemIndex], style: TextStyle(color:Color(0xffffffff), fontSize: 20.0),),
centerTitle: true,
backgroundColor: Color(0xff152137),
);
}
/**
* 初始化中间区域
* */
Widget _initContent(BuildContext context){
return _pageList[_itemIndex];
}
/**
* 初始化底部导航栏
* */
BottomNavigationBar _initBottom(BuildContext context){
return BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: _getItemIcon(0),
title: _getItemText(0)
),
BottomNavigationBarItem(
icon: _getItemIcon(1),
title: _getItemText(1)
),
BottomNavigationBarItem(
icon: _getItemIcon(2),
title: _getItemText(2)
),
BottomNavigationBarItem(
icon: _getItemIcon(3),
title: _getItemText(3)
),
],
type: BottomNavigationBarType.fixed,
currentIndex: _itemIndex,
onTap: _onTabItem,
);
}
/**
* 导航栏 item 点击事件
*/
void _onTabItem(int index) {
setState(() {
_itemIndex = index;
});
}
/**
* 获取导航栏 item 图标
* */
Image _getItemIcon(int index){
// 选中图标
if(index == _itemIndex){
return Image.asset(_pageIconList[index][1], width: 23.0, height: 23.0,);
}
// 默认图标
return Image.asset(_pageIconList[index][0], width: 23.0, height: 23.0,);
}
/**
* 获取导航栏 item 文字
* */
Text _getItemText(int index){
// 选中文字
if(index == _itemIndex){
return Text(_pageNameList[index], style:TextStyle(color: Color(0xff152137), fontSize: 15.2));
}
// 默认文字
return Text(_pageNameList[index], style:TextStyle(color: Color(0xff666666), fontSize: 15.0));
}
}
本篇到此完结，更多 Flutter 跨平台移动端开发 原创内容持续更新中~
期待您 关注 / 点赞 / 收藏 向着 大前端工程师 晋级！
