flutter SDK提供的默认标签样式不太吸引人。 但这并不意味着您无法自定义标签的外观。 在Flutter中自定义Tab指示器的样式可以通过简单的代码行完成，而无需实现我们自己的窗口小部件。
在本文中，我将向您展示如何为下一个Flutter项目添加5种不同的标签样式。
首先，您需要使用DefaultTabController类创建一个基本选项卡。 将DefaultTabController分配给MaterialApp小部件的home属性。 作为DefaultTabController的子级，可以将Scaffold与 Appbar和主体一起使用。 将Appbar小部件分配到Scaffold的Appbar属性，以使选项卡的标题部分。 对于脚手架的body属性，可以为TabBarView小部件分配3个子小部件，以在单击时显示Tab内容项。
image
检查完整的代码以获取默认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风格
作为第一种样式，我们将向选项卡指示器添加圆角样式。 首先，我将简要介绍我们将要修改的参数。
1. unselectedLabelColor –不存在指示符的标签颜色。 基本上，尚未选择的指标。
2. indicatorSize –选定的指标大小。 我们可以添加两个值以使指标为标签宽度或标签宽度。
3. Indicator –这是我们要为指标分配自定义样式的地方
Tab–这将包含Tab标题的列表。 在这里，我们可以为每个Tab标题添加额外的样式。
可以通过添加带有borderRadius 50的BoxDecoration来实现圆角样式。在这里，我们向每个Tab```标题添加红色边框。 当有人选择Tab``时，它将用红色填充。 如果您对边框不感兴趣，可以删除边框并保持简单。
image
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风格
我们将删除以前方法中添加到每个Tab的样式。 删除后，向BoxDecoration添加渐变。 您可以使用带有两种颜色的LinearGradient小部件来获得渐变效果。 您可以根据自己的喜好更改渐变。
image
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风格
矩形样式可以通过更改上一个中的小代码来完成。 可以通过为leftTop和rightTop都添加10来更改boxDecoration的BorderRadius。 然后，我将appbar backgroundColor更改为红色，以使其看起来更好。
image
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参数添加带有BeveledRectangleBorder的ShapeDecoration来获得Diamond选项卡样式。 BeveledRectangleBorder将允许您添加展平角而不是圆角。
在这里，我们使用borderRadius作为10使其看起来像这样。
image
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，可以实现不同的形状。 您可以将borderRadius更改为20，以获得其他形状。 您可以通过更改borderRadius值尝试不同的样式。
image
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),
],
),
),
);
我希望您能通过几行代码更好地了解如何更改选项卡样式。 如果您想观看此视频，请观看以下视频。
https://www.youtube.com/watch?v=Vnd0yvCkdNA&feature=youtu.be
网友评论