如何在Flutter中创建带无缝内凹底角的标签式组件？

工具选择：优先用CustomClipper #

直接用CustomClipper裁剪父容器的底部形状，比CustomPainter更高效且贴合需求——CustomClipper是Flutter专门用来定义组件裁剪路径的工具，能让父容器的底部直接生成带内凹的连续边缘，标签只需要对齐内凹位置、用同色填充，自然就不会有间隙。CustomPainter更适合自定义绘制复杂图形，用在这里反而需要额外处理容器和标签的图层关系，容易出问题。

具体实现步骤 #

1. 定义自定义Clipper
   写一个继承自CustomClipper<Path>的类，重写getClip方法来绘制包含内凹底角的路径。比如内凹部分用圆弧过渡，保证边缘连续：

class ConcaveBottomClipper extends CustomClipper<Path> {
  final double notchWidth; // 标签宽度
  final double notchDepth; // 内凹深度

  ConcaveBottomClipper({required this.notchWidth, required this.notchDepth});

  @override
  Path getClip(Size size) {
    final path = Path()
      ..moveTo(0, 0)
      ..lineTo((size.width - notchWidth) / 2, 0)
      // 绘制左侧内凹圆弧
      ..arcToPoint(
        Offset((size.width - notchWidth) / 2 + notchWidth, 0),
        radius: Radius.circular(notchDepth),
        clockwise: false,
      )
      ..lineTo(size.width, 0)
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height)
      ..close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}

2. 构建组件结构
   父容器用ClipPath包裹，应用上面的Clipper，然后在底部叠加标签组件，标签的宽度和Clipper里的notchWidth一致，颜色和父容器背景色相同：

Container(
  width: 300,
  height: 200,
  child: ClipPath(
    clipper: ConcaveBottomClipper(notchWidth: 100, notchDepth: 15),
    child: Container(
      color: Colors.blue,
      child: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          // 容器内部内容
          const Center(child: Text('主容器内容')),
          // 底部标签
          Container(
            width: 100,
            height: 30,
            decoration: const BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(15),
                topRight: Radius.circular(15),
              ),
            ),
            child: const Center(child: Text('标签', style: TextStyle(color: Colors.white))),
          ),
        ],
      ),
    ),
  ),
)

关键注意点 #

• 确保Clipper的内凹参数（宽度、深度）和标签的尺寸完全匹配，避免错位
• 标签的顶部圆角半径要和Clipper里的圆弧半径一致，保证过渡平滑
• 父容器和标签用完全相同的背景色，视觉上就会呈现“融合”效果

内容的提问来源于stack exchange，提问作者jimi-del