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

最新推荐文章于 2023-11-14 09:38:05 发布

原创最新推荐文章于 2023-11-14 09:38:05 发布 · 910 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #javascript #前端

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

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