Flutter实现特定形状TabBar容器的解决方案求助

你的现有代码未正确处理圆角，且路径逻辑不符合目标形状，以下是修正后的实现：

自定义裁剪器实现 #

class CustomTabClipper extends CustomClipper<Path> {
  final double borderRadius;
  final double topCornerOffset;
  final double bottomCornerOffset;

  CustomTabClipper({
    this.borderRadius = 16.0,
    this.topCornerOffset = 60.0,
    this.bottomCornerOffset = 16.0,
  });

  @override
  Path getClip(Size size) {
    final path = Path();

    // 起点：顶部左圆角右端点
    path.moveTo(borderRadius, 0);
    // 顶部直线到右侧斜角起点
    path.lineTo(size.width - topCornerOffset, 0);
    // 绘制右侧斜角，连接到底部右侧点
    path.lineTo(size.width - bottomCornerOffset, size.height);
    // 底部直线到左侧圆角下端点
    path.lineTo(borderRadius, size.height);
    // 绘制底部左圆角
    path.arcToPoint(
      Offset(0, size.height - borderRadius),
      radius: Radius.circular(borderRadius),
      clockwise: false,
    );
    // 左侧直线到顶部左圆角下端点
    path.lineTo(0, borderRadius);
    // 绘制顶部左圆角，回到起点
    path.arcToPoint(
      Offset(borderRadius, 0),
      radius: Radius.circular(borderRadius),
      clockwise: false,
    );

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomTabClipper oldClipper) {
    return borderRadius != oldClipper.borderRadius ||
        topCornerOffset != oldClipper.topCornerOffset ||
        bottomCornerOffset != oldClipper.bottomCornerOffset;
  }
}

使用示例 #

ClipPath(
  clipper: CustomTabClipper(
    borderRadius: 16,
    topCornerOffset: 60,
    bottomCornerOffset: 16,
  ),
  child: Container(
    height: 72,
    color: Colors.blue, // 可根据需求修改背景色
    child: const Tab(text: 'Tab1'),
  ),
),

说明 #

• 保留了你原代码中60、16的偏移数值，可根据设计需求直接调整参数
• 新增了圆角逻辑，匹配目标形状的圆角效果
• shouldReclip方法添加参数变化判断，调整参数时会自动重新裁剪

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