flutter_custom_bottom_tab_bar
和另外一個bottom_tab_bar的區別：github.com/LiuC520/flu… bottom_tab_bar是通過改變state來控制每一個tab的點選的點選事件，然後改變上面的顯示內容，這樣的方法比較慢比較卡，並不能滿足我們的日常使用
本文的具體的用法參考了，頂部tab的切換來做的，比較快
自定義底部導航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，可以自定義childpadding,//每個tab的內邊距width,//寬度height,//高度color,//背景顏色iconPadding,// 圖示 paddingbadge, //未讀訊息的widgetbadgeNo,//未讀訊息的數量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]),
],
),
);
}
}
複製程式碼