flutter_bottom_tab_bar
bottom_tab_bar,
用法和bottom_navigation_bar一样,但是新增了一些属性的用法
items : List
bottom navigation bar 里面的 icon and title.
onTap : ValueChanged
回调,带的是tab的index
The callback that is called when a item is tapped.
The widget creating the bottom navigation bar needs to keep track of the current index and call setState
to rebuild it with the newly provided index.
currentIndex : int
The index into [items] of the current active item.
当前激活的是哪一个tab
type : BottomTabBarType
Defines the layout and behavior of a [BottomTabBar].
See documentation for [BottomTabBarType] for information on the meaning of different types.
fixedColor : Color
The color of the selected item when bottom navigation bar is [BottomTabBarType.fixed].
If [fixedColor] is null then the theme's primary color, [ThemeData.primaryColor], is used. However if [BottomTabBar.type] is [BottomTabBarType.shifting] then [fixedColor] is ignored.
iconSize : double
The size of all of the [BottomTabBarItem] icons.
See [BottomTabBarItem.icon] for more information.
[新增] isAnimation : bool
动画是否开启,默认是开起的
[新增] badgeColor : Color
未读消息的颜色,默认是fixedColor
[新增] isInkResponse : bool
按压水墨屏效果是否开启,默认是开启的,
还是带动画的,不太适合我们的正常项目
[新增] badge : Widget
未读消息,是一个widget,可以自定义样式
[新增] badgeNo : String
未读消息
How to Use?
first import dependeny in pubspec.yaml
dependencies:
flutter:
sdk: flutter
bottom_tab_bar:
git: https://github.com/LiuC520/flutter_bottom_tab_bar.git
example:
class HomeState extends State with SingleTickerProviderStateMixin {
TabController _tabController;
int _selectedIndex = 1;
String badgeNo1;
var titles = ['home', 'video', 'find', 'smallvideo', 'my'];
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: 1, length: titles.length);
badgeNo1 = '12';
}
void _onItemSelected(int index) {
setState(() {
_selectedIndex = index;
badgeNo1 = '';
});
}
final _widgetOptions = [
Text('Index 0: Home'),
Text('Index 1: Video'),
Text('Index 2: find someone'),
Text('Index 3: small Video'),
Text('Index 4: My'),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bottom Tab Bar'),
actions: [new Icon(Icons.photo_camera)],
),
bottomNavigationBar: BottomTabBar(
items: [
BottomTabBarItem(
icon: Icon(icons[0]), title: Text(titles[0]), badgeNo: badgeNo1),
BottomTabBarItem(icon: Icon(icons[1]), title: Text(titles[1])),
BottomTabBarItem(icon: Icon(icons[2]), title: Text(titles[2])),
BottomTabBarItem(
icon: Icon(icons[3]),
activeIcon: Icon(icons[3]),
title: Text(titles[3])),
BottomTabBarItem(icon: Icon(icons[4]), title: Text(titles[4])),
],
fixedColor: Colors.blue,
currentIndex: _selectedIndex,
onTap: _onItemSelected,
type: BottomTabBarType.fixed,
isAnimation: false,
isInkResponse: false,
badgeColor: Colors.green,
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
);
}
}