本文已参与「新人创作礼」活动，一同敞开创作之路。

这是【Flutter 问题系列第 14 篇】，假如觉得有用的话，欢迎重视专栏。

一：为什么要自界说 TabBar indicator 的宽度和圆角 ？

假如你收到的原型图是这样的作用，如下图所示

这样的布局假如用 Flutter 原生 TabBar 中的操控器 indicator 是无法完成这个作用的，有两点

• 操控器的宽度由特点 indicatorSize 决议，现在只支撑两种，一种是 TabBarIndicatorSize.label，意思是和文字的标签 label 的长度相同，别的一种是 TabBarIndicatorSize.label.tab，意思是和操控器长度相同，而咱们需求的是比文字的长度要短一些。
• 默许操控器的边角是直角形状。而咱们需求的是圆角形状。

这个时分就需求咱们自己界说操控器了，接下来说的是怎么自界说操控器的宽度和圆角。

二：怎么自界说 TabBar indicator 的宽度和圆角 ？

假如你仅仅需求自界说操控器的代码，可点此跳转到博文尾部，假如你想看下怎么自界说操控器进程，可继续阅览。

自界说的思路

操控器能显示出来，说明原生有操控其款式的功用，最快的自界说就是找到哪里操控着，然后把代码仿制过来，再依据里边哪个当地操控着宽度和边角，修正为自己需求的即可。

过程一：检查默许的操控器源码

跳转到特点 indicator 界说的当地，发现其类型为 Decoration ，源码中很明显的说明晰操控器的默许款式是 UnderlineTabIndicator 类，如下图所示

先不着急仿制代码，咱们看看源码中哪个当地操控着操控器的宽度和边角。

过程二：检查操控器源码中操控宽度和边角的功用

经检查源码，发现决议操控器宽度的代码是

而决议操控器边角的代码是

过程三：仿制源码，修正操控器中操控宽度和边角的功用

仿制 UnderlineTabIndicator 的源码，改名为 CustomUnderlineTabIndicator , 在该类中新增两个特点，别离决议操控器的宽度和边角形状。

  final double width; // 操控器宽度
  final StrokeCap strokeCap; // 操控器边角形状

然后修正决议操控器宽度的代码为

  Rect _indicatorRectFor(Rect rect, TextDirection textDirection) {
    assert(rect != null);
    assert(textDirection != null);
    final Rect indicator = insets.resolve(textDirection).deflateRect(rect);
    // 期望的宽度
    double wantWidth = this.width;
    // 取中心坐标
    double cw = (indicator.left + indicator.right) / 2;
    // 这里是中心代码
    return Rect.fromLTWH(cw - wantWidth / 2,
        indicator.bottom - borderSide.width, wantWidth, borderSide.width);
  }

修正决议操控器边角形状的代码为

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    assert(configuration != null);
    assert(configuration.size != null);
    final Rect rect = offset & configuration.size;
    final TextDirection textDirection = configuration.textDirection;
    final Rect indicator = decoration
        ._indicatorRectFor(rect, textDirection)
        .deflate(decoration.borderSide.width / 2);
    final Paint paint = decoration.borderSide.toPaint()
      ..strokeCap = decoration.strokeCap; // 这里修正操控器边角的形状
    canvas.drawLine(indicator.bottomLeft, indicator.bottomRight, paint);
  }

怎么使用

仿制文件到你的项目中，直接在 TabBar 的特点 indicator 中，引入 CustomUnderlineTabIndicator 类，然后传入你想要的操控器宽度和边角形状即可。

三：获取自界说操控器的完好代码

完好代码可 点此跳转 GitHub ，假如有用，能够点个 Star 鼓励一下，谢谢。

你的问题得到解决了吗？欢迎在谈论区留言。

赠人玫瑰，手有余香，假如觉得文章不错，期望能够给个一键三连，感谢。

结束语

Google 的 Flutter 越来越火，截止 2021年4月18日 GitHub 标星已达 86K，Flutter 决然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。

无论你是 Flutter 新手还是已经入门了，不妨先点个重视，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及或许遇到的问题写到稀土博客中，期望自己学习的同时，也能够帮助更多的人。