Flutter Tabbarview 下划线颜色

Question

如何为未选中的标签添加下划线，如下所示:

https://ibb.co/mfkzKp

在这里您可以看到未选中的选项卡为灰色，选中的选项卡为蓝色。

Answer 1

我在文档中没有找到任何关于如何自定义禁用指标的引用。但是，您可以构建自己的小部件，该小部件将采用额外的 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,
        ),
      ),
    ),
  ),
),

这将导致所需的行为: