如何在 Flutter 中为标签栏创建未选中的指示器答案

【问题标题】：How to create unselected indicator for tab bar in Flutter如何在 Flutter 中为标签栏创建未选中的指示器
【发布时间】：2019-02-01 08:48:51
【问题描述】：

我使用装饰器为标签栏创建了一个自定义指示器。我想为标签栏中未选择的标签创建一个未选择的指示器。

我做了一个带有自定义装饰的容器，但当前选定的指示器绘制在容器装饰后面。

new TabBar( 
labelColor: Colors.black,
unselectedLabelColor: Colors.grey,
indicator: new CustomTabIndicator(),
tabs: [
new Container(decoration: new CustomTabInactive(),child: Tab(icon: Icon(Icons.person )))])

tab bar with unselected indicator

【问题讨论】：

标签： android tabs flutter tabbar indicator

【解决方案1】：

你可以同时使用 Stack/Container 和 TabBar 来做下划线

Stack(
            fit: StackFit.passthrough,
            alignment: Alignment.bottomCenter,
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(color: colorSecondary, width: 2.0),
                  ),
                ),
              ),
              TabBar(
                isScrollable: true,
                onTap: (index) => tabsModel.value = listTabsModel[index],
                tabs: listTabsModel
                    .map(
                      (value) => Tab(
                        child: value.tabComponent,
                      ),
                    )
                    .toList(),
              ),
            ],
          );

未选中的带有下划线的TabBar

不完全是您要查找的内容，但它可以为未选择的选项卡添加下划线。

【讨论】：

【解决方案2】：

不要在标签中使用容器，试试这个（用 DecoratedBox 包装 TabBar 并提供底部边框

DecoratedBox(
  //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: [
      ...
    ],
  ),
)

看起来不会完全如您所愿，但会为未选中的标签提供下划线指示。

【讨论】：

【解决方案3】：

我使用的解决方案与@andy 建议的类似，但有点不同

Stack(
  children: [
    Container(
      // The height of TabBar without icons is 46 (72 with), so 2 pixels for border
      height: 48,
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            color: Colors.red,
            width: 2,
          ),
        ),
      ),
    ),
    TabBar(
      isScrollable: true,
      indicator: UnderlineTabIndicator(
        borderSide: BorderSide(
          color: Colors.yellow,
          width: 2.0,
        ),
      ),
      indicatorSize: TabBarIndicatorSize.tab,
      tabs: <Widget>[
        Tab(
          text: "Tab 1",
        ),
        Tab(
          text: "Tab 2",
        ),
        Tab(
          text: "Tab 3",
        )
      ],
    ),
  ],
)

【讨论】：

我们不应该设置一个固定的高度。我们不能确定 AppBar 的高度。源代码中的任何常量都可能发生变化，并且可能因平台而异。

【解决方案4】：

我认为您可以将以下代码与插件一起使用。

TabBar(
      controller: tabController,
      tabs: [
        Tab(text: "ADCD"),
        Tab(text: "EFGH"),
        Tab(text: "IJKL"),
        Tab(text: "MNOP"),
        Tab(text: "QRST"),
      ],
      labelColor: Colors.white,
      labelStyle: TextStyle(
          fontSize: 12.0, fontWeight: FontWeight.w700, fontFamily: 'helvetica'),
      unselectedLabelColor: Colors.black,
      unselectedLabelStyle: TextStyle(
          fontSize: 12.0, fontWeight: FontWeight.w400, fontFamily: 'helvetica'),
      isScrollable: true,
      indicator: new BubbleTabIndicator(
        indicatorHeight: p_35,
        indicatorColor: const Color(0xFF58c8e3),
        tabBarIndicatorSize: TabBarIndicatorSize.tab,
      ),
    );

我已将此插件用于“BubbleTabIndicator” https://pub.dev/packages/bubble_tab_indicator

【讨论】：