在 Flutter 中的 TabBar 顶部添加指示器

Question

喜欢这个：

下面的代码会在TabBar底部添加Indicator：

  DefaultTabController(
    length: 2,
    child : new TabBar(
      labelColor: Colors.purple,
      indicatorColor: Colors.purple,
      indicatorSize: TabBarIndicatorSize.label,
      unselectedLabelColor: Colors.black,
    tabs: [
        new Tab(icon: Icon(Icons.chrome_reader_mode),),
        new Tab(icon: Icon(Icons.clear_all),),
    ]),
  );

但我需要在TabBar 之上使用Indicator。我认为构建自定义标签栏不是一个好主意，因为我不想为这个简单的事情做很多工作。

Answer 1

有一个简单的技巧，那就是使用indicator 属性并添加UnderlineTabIndicator()，并且该类具有名为insets 的命名参数，并且作为我添加的值EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 40.0),

Left: 50.0, // 将指标从左边缩小 50.0

顶部：0.0，

Right: 50.0, // 使指标从右侧缩小 50.0

Bottom: 40.0 // 将指标从底部推到顶部 40.0

如下：

const textStyle = TextStyle(
    fontSize: 12.0,
    color: Colors.white,
    fontFamily: 'OpenSans',
    fontWeight: FontWeight.w600);

//.....
new TabBar(
  controller: controller,
  labelColor: Color(0xFF343434),
  labelStyle: textStyle.copyWith(
      fontSize: 20.0,
      color: Color(0xFFc9c9c9),
      fontWeight: FontWeight.w700),
  indicator: UnderlineTabIndicator(
    borderSide: BorderSide(color: Color(0xDD613896), width: 8.0),
    insets: EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 40.0),
  ),
  unselectedLabelColor: Color(0xFFc9c9c9),
  unselectedLabelStyle: textStyle.copyWith(
      fontSize: 20.0,
      color: Color(0xFFc9c9c9),
      fontWeight: FontWeight.w700),
  tabs: [
    new Tab(
      text: 'LOGIN',
    ),
    new Tab(
      text: 'SIGNUP',
    ),
  ],
),

您还可以创建一个扩展 Decoration 的自定义指标

Answer 2

另一种选择是为TabBar 小部件的indicator: 属性定义一个新的Decoration，这样您就不会绑定到TabBar 高度（与使用insets: EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 40.0), 一样），但您可以'不要创建比标签本身更小的指示器。

这里是代码：

TabBar(
  indicator: BoxDecoration(
    border: Border(
      top: BorderSide(
        color: Theme.of(context).accentColor,
        width: 3.0
      ),
    ),
  ),
),

Answer 3

您必须为此创建一个自定义 TabController。我找到了一个 Flutter TabBar Here 的简单示例。你可以在这里详细查看。