Flutter设置TabBar indicator宽度(爆改UnderlineTabIndicator )

文章目录

        • 源码探索:
        • 修改:
        • 使用:

在默认的TabBar中,indicator的宽度是不可以修改的,每个长度都是平分一个Item的,如下图:

Flutter设置TabBar indicator宽度(爆改UnderlineTabIndicator )_第1张图片

这个是未修改的图,下面是修改的图,总的宽度为20

Flutter设置TabBar indicator宽度(爆改UnderlineTabIndicator )_第2张图片

总的在源码里翻来翻去,发现并没有可以设置Indicator的字段,这时候,尝试着通过源码来修改indicator的宽度,同时也是借助了这篇文章,不过,给的有些随意,故在这记录之。

源码探索:

点进TabBar的源码

  const TabBar({
   
    Key key,
    @required this.tabs,
    this.controller,
    this.isScrollable = false,
    this.indicatorColor,
    this.indicatorWeight = 2.0,
    this.indicatorPadding = EdgeInsets.zero,
    this.indicator,  //这是我们要修改的indicator
    this.indicatorSize,
    this.labelColor,
    this.labelStyle,
    this.labelPadding,
    this.unselectedLabelColor,
    this.unselectedLabelStyle,
    this.dragStartBehavior = DragStartBehavior.start,
    this.onTap,
  }) : assert(tabs != null),
       assert(isScrollable != null),
       assert(dragStartBehavior != null),
       assert(indicator != null || (indicatorWeight != null && indicatorWeight > 0.0)),
       assert(indi

你可能感兴趣的:(Flutter开发,Flutter,tabbar,TabBar,indicator,indicator,宽度,Flutter,app)