[英]Flutter Tabbarview underline color
我在文檔中沒有找到任何關於如何自定義禁用指示器的參考。 但是,您可以構建自己的小部件,該小部件將采用額外的裝飾參數:
class DecoratedTabBar extends StatelessWidget implements PreferredSizeWidget {
DecoratedTabBar({@required this.tabBar, @required this.decoration});
final TabBar tabBar;
final BoxDecoration decoration;
@override
Size get preferredSize => tabBar.preferredSize;
@override
Widget build(BuildContext context) {
return Stack(
children: [
Positioned.fill(child: Container(decoration: decoration)),
tabBar,
],
);
}
}
然后你可以隨意裝飾你的 TabBar:
appBar: AppBar(
bottom: DecoratedTabBar(
tabBar: TabBar(
tabs: [
// ...
],
),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.blue,
width: 2.0,
),
),
),
),
),
這將導致所需的行為:
TabBar(
indicatorColor: Color(0xffF15C22),
unselectedLabelColor: Colors.black,
labelColor: Color(0xffF15C22),
tabs: [
Tab(text: "Tab 1"),
Tab(text: "Tab 2"),
Tab(text: "Tab 3"),
],
),
indicatorColor 是有助於更改選項卡視圖中線條顏色的屬性
我知道我回答晚了,但這最終會幫助很多人。 你所要做的就是遵循@tomwyr在裝飾中提到的同樣的事情
您不必為此制作自己的小部件,只需執行此操作即可。
class CustomTabBarMenu extends StatefulWidget {
@override
_CustomTabBarMenuState createState() => _CustomTabBarMenuState();
}
class _CustomTabBarMenuState extends State<CustomTabBarMenu>
with SingleTickerProviderStateMixin{
TabController _controller;
@override
void initState() {
// TODO: implement initState
super.initState();
_controller = new TabController(length: YOUR_LENGTH, vsync: this);
}
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
//This is responsible for the background of the tabbar, does the magic
decoration: BoxDecoration(
//This is for background color
color: Colors.white.withOpacity(0.0),
//This is for bottom border that is needed
border: Border(bottom: BorderSide(color: Colors.grey, width: 0.8))),
child: TabBar(
controller: _controller,
tabs: [
...
]
)
),
Container(
height: MediaQuery.of(context).size.height/2.3,
child: new TabBarView(
controller: _controller,
children: <Widget>[
...
],
)
)
]
);
}
}
結果
最好的方法是這樣的:
Scaffold(
appBar: AppBar(
titleSpacing : 0 ,
automaticallyImplyLeading: false,
elevation: 0,
title: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
border: Border(
bottom: BorderSide(color: Colors.grey, width: 0.8))),
child: TabBar(
unselectedLabelColor: Colors.grey,
unselectedLabelStyle: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 16,
color: Color.fromRGBO(142, 142, 142, 1)),
labelColor: Colors.blue,
labelPadding: EdgeInsets.fromLTRB(0, toppadding, 0, 8),
labelStyle: TextStyle(
fontFamily: "Roboto",
fontSize: 16,
fontWeight: FontWeight.w700,
),
controller: tabController,
indicatorColor: Colors.blue,
indicator: UnderlineTabIndicator(
borderSide:
BorderSide(color: Colors.grey, width: 2.0),
),
tabs: [
Text(
'Title1',
),
Text(
'Title2',
),
])),
),
body: TabBarView(
controller: tabController,
children: <Widget>[Container(), Container()],
),
),
您可以將 DefaultTabController 與 Theme Widget 結合起來,並在 ThemeData 中的 indicatorColor 中傳遞顏色。
Theme(
data: ThemeData(
indicatorColor: Colors.red,
),
child: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text('Example =)'),
你可以嘗試使用這個包! 它非常簡單,只需將指標添加到標簽欄的指標屬性
bottom: TabBar(
isScrollable: true,
indicatorSize: TabBarIndicatorSize.label,
labelColor: Theme.of(context).accentColor,
unselectedLabelColor: Color(0xff5f6368),
**indicator: MD2Indicator(
indicatorHeight: 3,
indicatorColor: Theme.of(context).accentColor,
indicatorSize: MD2IndicatorSize.full),**
tabs: Constants.tabItems,
),
這個帖子之前已經被刪除了,因為我把它放在了兩個地方。 我刪除了另一篇文章,因為這是最好的地方。 可以在這里找到類似的問題: 如何在 Flutter 中為標簽欄創建未選擇的指示器
我相信最好的答案是將標簽欄包裹在一個材質小部件中,並給它一個高度(我選擇的高度為 1。)之后,您可以自定義材質小部件的陰影顏色。
Material(
type: MaterialType.canvas,
shadowColor: Colors.orange, //Custom unselected underline color
elevation: 1.0, //Create underline for entire tab bar
child: Container(
color: Color(0xFFe3f2fd), //Gives tab bar a background color
child: TabBar(tabs:
[Tab(text: 'ACTIVITY'),
Tab(text: 'LEADERBOARD',),
Tab(text: 'SETTINGS',)],
labelColor: Theme.of(context).primaryColor,
indicatorColor: Theme.of(context).primaryColor,
labelStyle: TextStyle(
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat'),
indicatorPadding:
EdgeInsets.symmetric(horizontal: 20.0),
),
),
),
你在標簽欄中添加這個
indicator: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.white,
width: 2.0,
),
),
),
然后你想出了這樣的東西
TabBar(
labelColor: Colors.white,
indicator: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.white,
width: 2.0,
),
),
),
tabs: [
Tab(child:
FxText.titleMedium("Pofile", fontWeight: 600,color: Colors.white,)),
Tab(
child: FxText.titleMedium(
"Events",
fontWeight: 600,color: Colors.white)),
],
)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.