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

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

hswizy

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

阅读量514

点赞数

文章标签： flutter javascript 前端

本文链接：https://blog.csdn.net/u011213403/article/details/133083272

版权

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