Flutter中Curved Tabbar indicator decoration实现咨询

你要实现的带两端内凹圆弧的指示器效果参考如下：

实现步骤 #

1. 自定义圆弧指示器类 #

直接继承Decoration类重写绘制逻辑即可，代码示例：

import 'package:flutter/material.dart';

class ArcTabIndicator extends Decoration {
  final Color color;
  // 内凹圆弧半径
  final double radius;
  // 指示器高度
  final double indicatorHeight;

  const ArcTabIndicator({
    required this.color,
    this.radius = 8,
    this.indicatorHeight = 4,
  });

  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return _ArcPainter(this, onChanged);
  }
}

class _ArcPainter extends BoxPainter {
  final ArcTabIndicator decoration;

  _ArcPainter(this.decoration, VoidCallback? onChanged) : super(onChanged);

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    final Rect rect = offset & configuration.size!;
    final Paint paint = Paint()
      ..color = decoration.color
      ..style = PaintingStyle.fill;

    // 计算指示器底部对齐的坐标区域
    final indicatorRect = Rect.fromLTWH(
      rect.left,
      rect.bottom - decoration.indicatorHeight,
      rect.width,
      decoration.indicatorHeight,
    );

    final Path path = Path();
    // 绘制左上角内凹圆弧
    path.moveTo(indicatorRect.left, indicatorRect.top + decoration.radius);
    path.quadraticBezierTo(
      indicatorRect.left,
      indicatorRect.top,
      indicatorRect.left + decoration.radius,
      indicatorRect.top,
    );
    // 绘制指示器上边线
    path.lineTo(indicatorRect.right - decoration.radius, indicatorRect.top);
    // 绘制右上角内凹圆弧
    path.quadraticBezierTo(
      indicatorRect.right,
      indicatorRect.top,
      indicatorRect.right,
      indicatorRect.top + decoration.radius,
    );
    // 绘制右侧和底部边线完成闭合
    path.lineTo(indicatorRect.right, indicatorRect.bottom);
    path.lineTo(indicatorRect.left, indicatorRect.bottom);
    path.close();

    canvas.drawPath(path, paint);
  }
}

2. 接入TabBar使用 #

将自定义的ArcTabIndicator赋值给TabBar的indicator属性即可：

TabBar(
  // 应用自定义指示器
  indicator: const ArcTabIndicator(
    color: Colors.blue,
    radius: 6,
    indicatorHeight: 5,
  ),
  // 让指示器宽度和Tab文字宽度匹配，对齐设计效果
  indicatorSize: TabBarIndicatorSize.label,
  tabs: const [
    Tab(text: "首页"),
    Tab(text: "分类"),
    Tab(text: "我的"),
  ],
)

效果调整说明 #

• 修改radius参数可以调整两端内凹圆弧的曲率，数值越大圆弧凹陷越明显
• 修改indicatorHeight参数可以调整指示器的高度
• 如果你需要指示器和整个Tab项等宽，将indicatorSize改为TabBarIndicatorSize.tab即可

内容的提问来源于stack exchange，提问作者Dev ahmed