https://blog.csdn.net/liu__520/article/details/84138767
目錄
**[flutter_bottom_tab_bar](https://github.com/LiuC520/flutter_bottom_tab_bar)**
items : ```List```
onTap : ```ValueChanged```
currentIndex : ```int```
type : ```BottomTabBarType ```
fixedColor : ```Color ```
iconSize : ```double```
[新增] isAnimation : ```bool```
[新增] badgeColor : ```Color```
[新增] isInkResponse : ```bool```
[新增] badge : ```Widget```
[新增] badgeNo : ```String```
How to Use?
flutter_bottom_tab_bar
bottom_tab_bar,
用法和bottom_navigation_bar一樣，但是新增了一些屬性的用法
items : List<BottomTabBarItem>
bottom navigation bar 里面的 icon and title.
onTap : ValueChanged<int>
回調，帶的是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
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<Home> 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: <Widget>[new Icon(Icons.photo_camera)],
),
bottomNavigationBar: BottomTabBar(
items: <BottomTabBarItem>[
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),
),
);
}
}
————————————————
版權聲明：本文為CSDN博主「我是劉成」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/liu__520/article/details/84138767