flutter SDK提供的默認(rèn)標(biāo)簽樣式不太吸引人。 但這并不意味著您無法自定義標(biāo)簽的外觀。 在Flutter中自定義Tab指示器的樣式可以通過簡(jiǎn)單的代碼行完成脓斩，而無需實(shí)現(xiàn)我們自己的窗口小部件。
在本文中，我將向您展示如何為下一個(gè)Flutter項(xiàng)目添加5種不同的標(biāo)簽樣式变擒。
首先，您需要使用DefaultTabController類創(chuàng)建一個(gè)基本選項(xiàng)卡寝志。 將DefaultTabController分配給MaterialApp小部件的home屬性娇斑。 作為DefaultTabController的子級(jí)，可以將Scaffold與 Appbar和主體一起使用材部。 將Appbar小部件分配到Scaffold的Appbar屬性毫缆，以使選項(xiàng)卡的標(biāo)題部分。 對(duì)于腳手架的body屬性败富，可以為TabBarView小部件分配3個(gè)子小部件悔醋，以在單擊時(shí)顯示Tab內(nèi)容項(xiàng)。
檢查完整的代碼以獲取默認(rèn)Tab兽叮。
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
elevation: 0,
bottom: TabBar(
indicatorSize: TabBarIndicatorSize.label,
tabs: [
Tab(
child: Align(
alignment: Alignment.center,
child: Text("APPS"),
),
),
Tab(
child: Align(
alignment: Alignment.center,
child: Text("MOVIES"),
),
),
Tab(
child: Align(
alignment: Alignment.center,
child: Text("GAMES"),
),
),
],
),
),
body: TabBarView(
children: [
Icon(Icons.apps),
Icon(Icons.movie),
Icon(Icons.games),
],
),
),
);
1. 圓角Tab風(fēng)格
作為第一種樣式芬骄，我們將向選項(xiàng)卡指示器添加圓角樣式猾愿。 首先，我將簡(jiǎn)要介紹我們將要修改的參數(shù)账阻。
1. unselectedLabelColor –不存在指示符的標(biāo)簽顏色蒂秘。 基本上，尚未選擇的指標(biāo)淘太。
2. indicatorSize –選定的指標(biāo)大小姻僧。 我們可以添加兩個(gè)值以使指標(biāo)為標(biāo)簽寬度或標(biāo)簽寬度。
3. Indicator –這是我們要為指標(biāo)分配自定義樣式的地方
Tab–這將包含Tab標(biāo)題的列表蒲牧。 在這里撇贺，我們可以為每個(gè)Tab標(biāo)題添加額外的樣式。
可以通過添加帶有borderRadius 50的BoxDecoration來實(shí)現(xiàn)圓角樣式冰抢。在這里松嘶，我們向每個(gè)Tab```標(biāo)題添加紅色邊框。 當(dāng)有人選擇Tab``時(shí)挎扰，它將用紅色填充翠订。 如果您對(duì)邊框不感興趣，可以刪除邊框并保持簡(jiǎn)單遵倦。
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
backgroundColor:Colors.white,
elevation: 0,
bottom: TabBar(
unselectedLabelColor:Colors.redAccent,
indicatorSize: TabBarIndicatorSize.label,
indicator:BoxDecoration(
color:Colors.redAccent,
borderRadius:BorderRadius.circular(50),
),
tabs: [
Tab(
child:Container(
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(50),
border:Border.all(color:Colors.redAccent,
width:1,
),
),
child:Align(
alignment:Alignment.center,
child:Text("APPS"),
),
),
),
Tab(
child:Container(
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(50),
border:Border.all(color:Colors.redAccent,
width:1,
),
),
child:Align(
alignment:Alignment.center,
child:Text("MOVIES"),
),
),
),
Tab(
child:Container(
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(50),
border:Border.all(color:Colors.redAccent,
width:1,
),
),
child:Align(
alignment:Alignment.center,
child:Text("GASMES"),
),
),
),
],
),
),
body: TabBarView(
children: [
Icon(Icons.apps),
Icon(Icons.movie),
Icon(Icons.games),
],
),
),
);
2. 圓角帶有漸變色Tab風(fēng)格
我們將刪除以前方法中添加到每個(gè)Tab的樣式尽超。 刪除后，向BoxDecoration添加漸變梧躺。 您可以使用帶有兩種顏色的LinearGradient小部件來獲得漸變效果似谁。 您可以根據(jù)自己的喜好更改漸變。
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
backgroundColor:Colors.white,
elevation: 0,
bottom: TabBar(
unselectedLabelColor:Colors.redAccent,
indicatorSize: TabBarIndicatorSize.tab,
indicator:BoxDecoration(
gradient:LinearGradient(
colors:[
Colors.redAccent,
Colors.orangeAccent,
],
),
color:Colors.redAccent,
borderRadius:BorderRadius.circular(50),
),
tabs: [
Tab(
child:Align(
alignment:Alignment.center,
child:Text("APPS"),
),
),
Tab(
child:Align(
alignment:Alignment.center,
child:Text("MOVIES"),
),
),
Tab(
child:Align(
alignment:Alignment.center,
child:Text("GASMES"),
),
),
],
),
),
body: TabBarView(
children: [
Icon(Icons.apps),
Icon(Icons.movie),
Icon(Icons.games),
],
),
),
);
3. 矩形Tab風(fēng)格
矩形樣式可以通過更改上一個(gè)中的小代碼來完成燥狰。 可以通過為leftTop和rightTop都添加10來更改boxDecoration的BorderRadius棘脐。 然后，我將appbar backgroundColor更改為紅色龙致，以使其看起來更好蛀缝。
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
backgroundColor:Colors.redAccent,
elevation: 0,
bottom: TabBar(
labelColor:Colors.redAccent,
unselectedLabelColor:Colors.white,
indicatorSize: TabBarIndicatorSize.label,
indicator:BoxDecoration(
color:Colors.white,
borderRadius:BorderRadius.only(
topLeft:Radius.circular(10),
topRight:Radius.circular(10),
),
),
tabs: [
Tab(
child:Align(
alignment:Alignment.center,
child:Text("APPS"),
),
),
Tab(
child:Align(
alignment:Alignment.center,
child:Text("MOVIES"),
),
),
Tab(
child:Align(
alignment:Alignment.center,
child:Text("GASMES"),
),
),
],
),
),
body: TabBarView(
children: [
Icon(Icons.apps),
Icon(Icons.movie),
Icon(Icons.games),
],
),
),
);
4.菱形Tab樣式
您可以通過為ShapeDecoration小部件的shape參數(shù)添加帶有BeveledRectangleBorder的ShapeDecoration來獲得Diamond選項(xiàng)卡樣式。 BeveledRectangleBorder將允許您添加展平角而不是圓角目代。
在這里屈梁，我們使用borderRadius作為10使其看起來像這樣。
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
backgroundColor:Colors.white,
elevation: 0,
bottom: TabBar(
unselectedLabelColor:Colors.redAccent,
indicatorPadding:EdgeInsets.only(left:30,right:30),
indicator:ShapeDecoration(
color:Colors.redAccent,
shape:BeveledRectangleBorder(
side:BorderSide(
color:Colors.redAccent,
),
borderRadius:BorderRadius.circular(10),
),
),
tabs: [
Tab(
child:Align(
alignment:Alignment.center,
child:Text("APPS"),
),
),
Tab(
child:Align(
alignment:Alignment.center,
child:Text("MOVIES"),
),
),
Tab(
child:Align(
alignment:Alignment.center,
child:Text("GASMES"),
),
),
],
),
),
body: TabBarView(
children: [
Icon(Icons.apps),
Icon(Icons.movie),
Icon(Icons.games),
],
),
),
);
5.菱形Tab樣式（2）
同樣榛了，通過更改BeveledRectangleBorder的borderRadius在讶，可以實(shí)現(xiàn)不同的形狀。 您可以將borderRadius更改為20霜大，以獲得其他形狀构哺。 您可以通過更改borderRadius值嘗試不同的樣式。
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
backgroundColor:Colors.white,
elevation: 0,
bottom: TabBar(
unselectedLabelColor:Colors.redAccent,
indicatorPadding:EdgeInsets.only(left:30,right:30),
indicator:ShapeDecoration(
color:Colors.redAccent,
shape:BeveledRectangleBorder(
side:BorderSide(
color:Colors.redAccent,
),
borderRadius:BorderRadius.circular(20),
),
),
tabs: [
Tab(
child:Align(
alignment:Alignment.center,
child:Text("APPS"),
),
),
Tab(
child:Align(
alignment:Alignment.center,
child:Text("MOVIES"),
),
),
Tab(
child:Align(
alignment:Alignment.center,
child:Text("GASMES"),
),
),
],
),
),
body: TabBarView(
children: [
Icon(Icons.apps),
Icon(Icons.movie),
Icon(Icons.games),
],
),
),
);
我希望您能通過幾行代碼更好地了解如何更改選項(xiàng)卡樣式。 如果您想觀看此視頻曙强，請(qǐng)觀看以下視頻残拐。
https://www.youtube.com/watch?v=Vnd0yvCkdNA&feature=youtu.be
