这是【Flutter 问题系列第 14 篇】，如果觉得有用的话，欢迎关注专栏。
- 一：为什么要自定义 TabBar indicator 的宽度和圆角 ？
- 二：如何自定义 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 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到 CSDN 博客中，希望自己学习的同时，也可以帮助更多的人。
