如何为未选中的标签添加下划线,如下所示:https://ibb.co/mfkzKp在这里你可以看到它是灰色为未选择的标签,蓝色为已选择。
6yjfywim1#
我还没有在文档中找到任何关于如何自定义禁用指示器的参考。但是,您可以构建自己的小部件,它将接受额外的 decoration 参数:
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, ), ), ), ), ),
这将导致所需的行为:
brvekthn2#
TabBar( indicatorColor: Color(0xffF15C22), unselectedLabelColor: Colors.black, labelColor: Color(0xffF15C22), tabs: [ Tab(text: "Tab 1"), Tab(text: "Tab 2"), Tab(text: "Tab 3"), ], ),
indicatorColor是用于更改选项卡视图中线条颜色的属性
bd1hkmkf3#
我知道我回答晚了,但这最终会帮助很多人。你要做的是遵循@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>[ ... ], ) ) ] ); } }
结果
rkue9o1l4#
您可以只使用Theme Widget来包含DefaultTabController,并将indicatorColor中的颜色传递给ThemeData。
Theme( data: ThemeData( indicatorColor: Colors.red, ), child: DefaultTabController( length: 2, child: Scaffold( appBar: AppBar( title: Text('Example =)'),
thigvfpy5#
最好的办法是这样的:
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()], ), ),
qnyhuwrf6#
您可以尝试使用this package!它非常简单,只需将指示器添加到选项卡栏的indicator属性中
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, ),
xfb7svmp7#
这篇文章之前被删除了,因为我把它放在了两个地方。我删除了另一篇文章,因为这是最好的地方。一个类似的问题可以在这里找到:How to create unselected indicator for tab bar in Flutter我认为最好的答案是将选项卡栏 Package 在Material小部件中,并为其指定一个标高(我选择的标高为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), ), ), ),
cvxl0en28#
您可以在选项卡栏中添加此内容
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)), ], )
8条答案
按热度按时间6yjfywim1#
我还没有在文档中找到任何关于如何自定义禁用指示器的参考。但是,您可以构建自己的小部件,它将接受额外的 decoration 参数:
然后,您就可以随意装饰TabBar:
这将导致所需的行为:
brvekthn2#
indicatorColor是用于更改选项卡视图中线条颜色的属性
bd1hkmkf3#
我知道我回答晚了,但这最终会帮助很多人。你要做的是遵循@tomwyr装饰中提到的同样的事情
你不必为此制作自己的小部件,只需这样做,就可以了。
结果
rkue9o1l4#
您可以只使用Theme Widget来包含DefaultTabController,并将indicatorColor中的颜色传递给ThemeData。
thigvfpy5#
最好的办法是这样的:
qnyhuwrf6#
您可以尝试使用this package!它非常简单,只需将指示器添加到选项卡栏的indicator属性中
xfb7svmp7#
这篇文章之前被删除了,因为我把它放在了两个地方。我删除了另一篇文章,因为这是最好的地方。一个类似的问题可以在这里找到:How to create unselected indicator for tab bar in Flutter
我认为最好的答案是将选项卡栏 Package 在Material小部件中,并为其指定一个标高(我选择的标高为1)。
cvxl0en28#
您可以在选项卡栏中添加此内容
然后你想出了这样的点子