Flutter TabBar indicator 提供了高度和形状的设置,没法直接设置其宽度;所有需要通过indicator
参数来重新绘制indicator来实现;
class MyCustomIndicator extends Decoration {
final double indWidth;
final double indHeight;
final double radius;
MyCustomIndicator({this.indWidth = 20.0, this.indHeight = 3.0, this.radius = 2});
@override
BoxPainter createBoxPainter([VoidCallback? onChanged]) {
return _CustomBoxPainter(this, onChanged, indWidth, indHeight, radius);
}
}
class _CustomBoxPainter extends BoxPainter {
final MyCustomIndicator decoration;
final double indWidth;
final double indHeight;
final double radius;
_CustomBoxPainter(this.decoration, VoidCallback? onChanged, this.indWidth, this.indHeight, this.radius)
: super(onChanged);
@override
void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
final size = configuration.size!;
final newOffset = Offset(offset.dx + (size.width - indWidth) / 2, size.height - indHeight);
final Rect rect = newOffset & Size(indWidth, indHeight);
final Paint paint = Paint();
paint.color = Colors.blue;
paint.style = PaintingStyle.fill;
canvas.drawRRect(
RRect.fromRectAndRadius(rect, Radius.circular(radius)), // 圆角半径
paint,
);
}
}