flutter 浮动标签栏视图下划线颜色

qmb5sa22  于 2022-11-30  发布在  Flutter
关注(0)|答案(8)|浏览(153)

如何为未选中的标签添加下划线,如下所示:
https://ibb.co/mfkzKp
在这里你可以看到它是灰色为未选择的标签,蓝色为已选择。

6yjfywim

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,
        ),
      ),
    ),
  ),
),

这将导致所需的行为:

brvekthn

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是用于更改选项卡视图中线条颜色的属性

bd1hkmkf

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>[
          ...
        ],
      )
    )
  ]
);
}
}

结果

rkue9o1l

rkue9o1l4#

您可以只使用Theme Widget来包含DefaultTabController,并将indicatorColor中的颜色传递给ThemeData。

Theme(
  data: ThemeData(
    indicatorColor: Colors.red,
  ),
  child: DefaultTabController(
    length: 2,
    child: Scaffold(
      appBar: AppBar(
        title: Text('Example =)'),
thigvfpy

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()],
    ),
  ),
qnyhuwrf

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,
      ),
xfb7svmp

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),
                      ),
                    ),
                  ),
cvxl0en2

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)),
              ],
            )

相关问题