在Flutter 开发中，我们会发现TabBar 的下划线的长度，要不是跟随tab的长度，要不就是跟随lable 文字的长度，但是，如果我们想要指定的下划线的长度的话，这时我们就需要自定义TabBar 的 indicator 属性。
TabBar(
controller: _tabController, // tab 控制器
isScrollable: true, // tab 是否可以滑动
automaticIndicatorColorAdjustment: false, //是否应该自动调整[indicatorColor]。 当为true，会自动调整为白色
labelColor: Colors.red, // label 选中文字的颜色
unselectedLabelColor: Colors.grey, // label 未选中文字的颜色
indicatorSize: TabBarIndicatorSize.label, //indicator 大小，TabBarIndicatorSize.label，TabBarIndicatorSize.tab
indicator: const CustomTabIndicator(
width: 20,
borderSide: BorderSide(width: 2.0, color: Colors.red)),
indicatorColor: Colors.blue, // 设置indicator 颜色，当我们设置了indicator 属性之后，该属性设置将会失败，以indicator中设置的颜色为准
tabs: List.generate(
tabBarItemList.length,
(index) => Tab(
text: tabBarItemList[index],
)))
首先我们要自定义indicator属性的时候，我们先点击进去看源码：
/// Defines the appearance of the selected tab indicator.
///
/// If [indicator] is specified or provided from [TabBarTheme],
/// the [indicatorColor], and [indicatorWeight] properties are ignored.
///
/// The default, underline-style, selected tab indicator can be defined with
/// [UnderlineTabIndicator].
///
/// The indicator's size is based on the tab's bounds. If [indicatorSize]
/// is [TabBarIndicatorSize.tab] the tab's bounds are as wide as the space
/// occupied by the tab in the tab bar. If [indicatorSize] is
/// [TabBarIndicatorSize.label], then the tab's bounds are only as wide as
/// the tab widget itself.
final Decoration? indicator;
其中，我们可以看见 flutter 内部使用的默认的indicator属性的值，是 UnderlineTabIndicator 这个类，
然后我们再进去看这个UnderlineTabIndicator 类：
Rect _indicatorRectFor(Rect rect, TextDirection textDirection) {
assert(rect != null);
assert(textDirection != null);
final Rect indicator = insets.resolve(textDirection).deflateRect(rect);
return Rect.fromLTWH(
indicator.left,
indicator.bottom - borderSide.width,
indicator.width,
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.0);
final Paint paint = decoration.borderSide.toPaint()..strokeCap = StrokeCap.square;
canvas.drawLine(indicator.bottomLeft, indicator.bottomRight, paint);
}
我们发现自定义indicator 样式只需要更改这两个方法就可以，_indicatorRectFor（）用来决定控制器宽度、位置，paint（）来决定控制器圆角。
接下来，我们想要自定义indicator ，只需要复制源码，然后更改这个两个方法。
import 'package:flutter/material.dart';
class CustomTabIndicator extends Decoration {
/// Create an underline style selected tab indicator.
///
/// The [borderSide] and [insets] arguments must not be null.
const CustomTabIndicator({
this.width = 20,
this.strokeCap = StrokeCap.round,
this.borderSide = const BorderSide(width: 2.0, color: Colors.white),
this.insets = EdgeInsets.zero,
}) : assert(borderSide != null),
assert(insets != null);
/// The color and weight of the horizontal line drawn below the selected tab.
final BorderSide borderSide;
/// Locates the selected tab's underline relative to the tab's boundary.
///
/// The [TabBar.indicatorSize] property can be used to define the tab
/// indicator's bounds in terms of its (centered) tab widget with
/// [TabBarIndicatorSize.label], or the entire tab with
/// [TabBarIndicatorSize.tab].
final EdgeInsetsGeometry insets;
///新增的属性
final double width; // 控制器宽度
final StrokeCap strokeCap; // 控制器边角形状
@override
Decoration? lerpFrom(Decoration? a, double t) {
if (a is CustomTabIndicator) {
return CustomTabIndicator(
borderSide: BorderSide.lerp(a.borderSide, borderSide, t),
insets: EdgeInsetsGeometry.lerp(a.insets, insets, t)!,
);
}
return super.lerpFrom(a, t);
}
@override
Decoration? lerpTo(Decoration? b, double t) {
if (b is CustomTabIndicator) {
return CustomTabIndicator(
borderSide: BorderSide.lerp(borderSide, b.borderSide, t),
insets: EdgeInsetsGeometry.lerp(insets, b.insets, t)!,
);
}
return super.lerpTo(b, t);
}
@override
BoxPainter createBoxPainter([VoidCallback? onChanged]) {
return _UnderlinePainter(this, onChanged);
}
///决定控制器宽度的方法
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;
print(
'$cw,indicator left${indicator.left}, right ${indicator.right}, indicator top ${indicator.top},indicator bottom${indicator.bottom}, border width${borderSide.width}');
//这里是核心代码 //下划线靠左
// return Rect.fromLTWH(indicator.left,
// indicator.bottom - borderSide.width, wantWidth, borderSide.width);
//下划线居中
return Rect.fromLTWH(cw - wantWidth / 2,
indicator.bottom - borderSide.width, wantWidth, borderSide.width);
}
@override
Path getClipPath(Rect rect, TextDirection textDirection) {
return Path()..addRect(_indicatorRectFor(rect, textDirection));
}
}
class _UnderlinePainter extends BoxPainter {
_UnderlinePainter(this.decoration, VoidCallback? onChanged)
: assert(decoration != null),
super(onChanged);
final CustomTabIndicator decoration;
///决定控制器边角形状的方法
@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.0);
final Paint paint = decoration.borderSide.toPaint()
..strokeCap = decoration.strokeCap; //这块更改为想要的形状
canvas.drawLine(indicator.bottomLeft, indicator.bottomRight, paint);
}
}
附上 效果图：（如果要封装的话，我们可以提供个属性，来控制下划线靠左还是居中）
Screenshot_20220711_173221.png
Screenshot_20220711_173258.png