flutter_custom_bottom_tab_bar
和另外一个bottom_tab_bar的区别：https://github.com/LiuC520/flutter_bottom_tab_bar
bottom_tab_bar是通过改变state来控制每一个tab的点击的点击事件，然后改变上面的显示内容，这样的方法比较慢比较卡，并不能满足我们的日常使用
本文的具体的用法参考了，顶部tab的切换来做的，比较快
screenshot.png
自定义底部导航tab
官方的tab导航，tabbar无法改变宽高，因此无法自定义
TabContainer
* 自定义的TabBar
* 这里是自定义的，实现了PreferredSizeWidget，因为在AppBar的bottom属性里，只支持PreferredSizeWidget这样的widget
同时是此控件还能设置padding
-
alignment, //对齐方式 -
padding,//内边距 -
Color color,// 背景颜色 -
Decoration decoration,//在child背后显示的装饰样式 -
foregroundDecoration,//在child之前显示的装饰样式 -
width,//宽度 -
height,// 高度 -
BoxConstraints constraints, //约束 -
margin,//外边距 -
transform,//矩阵转换，可以是用缩放，平移、旋转 -
child,//子view
EachTab
TabBar 的tab
就是 和 Tab 一样
用途：可以用在顶部导航，也可以用在底部tab导航
-
text, //tab的文字 -
textStyle,//tab文字的样式 -
icon,// 图标 -
child,// 可以用不用text和child，可以自定义child -
padding,//每个tab的内边距 -
width,//宽度 -
height,//高度 -
color,//背景颜色 -
iconPadding,// 图标 padding -
badge, //未读消息的widget -
badgeNo,//未读消息的数量 -
badgeColor//未读消息的背景颜色
Example
在pubspec.yaml中引入包
flutter_custom_bottom_tab_bar:
git: https://github.com/LiuC520/flutter_custom_bottom_tab_bar.git
在要使用的文件中导入文件
import 'package:flutter_custom_bottom_tab_bar/tabbar.dart';
import 'package:flutter_custom_bottom_tab_bar/eachtab.dart';
class Entry extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return EntryState();
}
}
class EntryState extends State<Entry> with SingleTickerProviderStateMixin {
TabController _tabController;
int _selectedIndex = 0;
var titles = ['首页', '西瓜视频', '找人', '小视频', '我的'];
var icons = [
Icons.home,
Icons.play_arrow,
Icons.child_friendly,
Icons.fiber_new,
Icons.mic_none
];
@override
void initState() {
super.initState();
_tabController =
new TabController(vsync: this, initialIndex: 0, length: titles.length);
_tabController.addListener(() {
setState(() => _selectedIndex = _tabController.index);
print("liucheng-> ${_tabController.indexIsChanging}");
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: Container(
height: 46,
child: Column(
children: <Widget>[
Divider(
height: 2,
),
new TabBar(
isScrollable: false,
controller: _tabController,
indicatorColor: Colors.transparent,
labelColor: Colors.red,
labelPadding: EdgeInsets.all(0),
unselectedLabelColor: Colors.black,
tabs: <Widget>[
EachTab(
width: 70,
badgeNo: '12',
badgeColor: Colors.red,
height: 40,
padding: EdgeInsets.all(0),
icon: _selectedIndex == 0
? Image.asset(
'assets/imgs/tab_home_selected.png',
width: 20,
height: 20,
)
: Image.asset(
'assets/imgs/tab_home.png',
width: 20,
height: 20,
),
text: titles[0],
iconPadding: EdgeInsets.fromLTRB(0, 0, 0, 2),
textStyle: TextStyle(fontSize: 10)),
EachTab(
height: 40,
padding: EdgeInsets.all(0),
icon: _selectedIndex == 1
? Image.asset(
'assets/imgs/tab_xigua_selected.png',
width: 20,
height: 20,
)
: Image.asset(
'assets/imgs/tab_xigua.png',
width: 20,
height: 20,
),
text: titles[1],
iconPadding: EdgeInsets.fromLTRB(0, 0, 0, 2),
textStyle: TextStyle(fontSize: 10)),
EachTab(
height: 40,
padding: EdgeInsets.all(0),
icon: _selectedIndex == 2
? Image.asset(
'assets/imgs/tab_find_selected.png',
width: 20,
height: 20,
)
: Image.asset(
'assets/imgs/tab_find.png',
width: 20,
height: 20,
),
text: titles[2],
iconPadding: EdgeInsets.fromLTRB(0, 0, 0, 2),
textStyle: TextStyle(fontSize: 10)),
EachTab(
height: 40,
padding: EdgeInsets.all(0),
icon: _selectedIndex == 3
? Image.asset(
'assets/imgs/tab_video_selected.png',
width: 20,
height: 20,
)
: Image.asset(
'assets/imgs/tab_video.png',
width: 20,
height: 20,
),
text: titles[3],
iconPadding: EdgeInsets.fromLTRB(0, 0, 0, 2),
textStyle: TextStyle(fontSize: 10)),
EachTab(
height: 40,
padding: EdgeInsets.all(0),
icon: _selectedIndex == 4
? Image.asset(
'assets/imgs/tab_me_selected.png',
width: 20,
height: 20,
)
: Image.asset(
'assets/imgs/tab_me.png',
width: 20,
height: 20,
),
text: titles[4],
iconPadding: EdgeInsets.fromLTRB(0, 0, 0, 2),
textStyle: TextStyle(fontSize: 10)),
],
),
],
),
),
body: TabBarView(
physics: NeverScrollableScrollPhysics(), //设置滑动的效果，这个禁用滑动
controller: _tabController,
children: <Widget>[
Home(),
Text(titles[1]),
Text(titles[2]),
Text(titles[3]),
Text(titles[4]),
],
),
);
}
}
