Flutter TabBar 自定义 indicator 的宽、高、圆角

最新推荐文章于 2024-08-13 10:51:12 发布

hswizy

最新推荐文章于 2024-08-13 10:51:12 发布

阅读量818

点赞数

CC 4.0 BY-SA版权

文章标签： flutter javascript 前端

本文链接：https://blog.youkuaiyun.com/u011213403/article/details/133083272

文章介绍了如何在Flutter中使用自定义装饰器MyCustomIndicator扩展TabBarIndicator，解决无法直接设置宽度的问题，通过CustomBoxPainter重绘带有特定尺寸和圆角的指示器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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,
    );
  }
}