flutter自定义tabbar显示
·
方法一:
int _tabIndex = 0;
var tabImages;
// 存放三个页面,跟fragmentList一样
var _pageList;
var appBarTitles = ['今日任务', '兑换奖励', '我的'];
// 根据选择获得对应的normal或者press的icon
Image getTabIcon(int curIndex) {
if (curIndex == _tabIndex) {
return tabImages[curIndex][1];
}
return tabImages[curIndex][0];
}
/// 根据image路径获取图片
Image getTabImage(String path) {
return new Image.asset(
path,
width: 26.0,
height: 26.0,
);
}
/// 初始化数据
void initData() {
const rootPath = 'images';
// 初始化选中和未选中的icon
tabImages = [
[
getTabImage('$rootPath/tabbar_task_nor@2x.png'),
getTabImage('$rootPath/tabbar_task_sel@2x.png')
],
[
getTabImage('$rootPath/tabbar_reward_nor@2x.png'),
getTabImage('$rootPath/tabbar_reward_sel@2x.png')
],
[
getTabImage('$rootPath/tabbar_mine_nor@2x.png'),
getTabImage('$rootPath/tabbar_mine_sel@2x.png')
]
];
/*
* 三个子界面
*/
_pageList = [
new HomePage(),
new SecondPage(),
new MyPage()
];
}
// 获取bottomTab的颜色和文字
Text getTabTitle(int curIndex) {
if (curIndex == _tabIndex) {
return new Text(appBarTitles[curIndex],
style: new TextStyle(
fontWeight: FontWeight.bold,
color: const Color.fromRGBO(52, 216, 105, 1)));
} else {
return new Text(appBarTitles[curIndex],
style: new TextStyle(
fontWeight: FontWeight.bold,
color: const Color.fromRGBO(182, 182, 182, 1)));
}
}
@override
void initState() {
// TODO: implement initState
super.initState();
initData();
}
@override
Widget build(BuildContext context) {
return CupertinoTabScaffold(
tabBar: CupertinoTabBar(
border: null,
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: getTabIcon(0),title: getTabTitle(0)),
new BottomNavigationBarItem(
icon: getTabIcon(1),title: getTabTitle(1)),
new BottomNavigationBarItem(
icon: getTabIcon(2),title: getTabTitle(2)),
],
iconSize: 26.0,
backgroundColor: Colors.white,
currentIndex: _tabIndex,
onTap: (index) {
setState(() {
_tabIndex = index;
});
},
),
tabBuilder: (context, index) {
return CupertinoTabView(
builder: (context) {
return _pageList[index];
},
);
},
);
}
方法二:待续,后边加上。
更多推荐


所有评论(0)