Flutter中如何实现容器中部的弧形凹陷效果？

直接通过自定义CustomClipper就能实现你要的顶部弧形缺口透明的容器，不需要叠加其他Widget。以下是完整代码：

1. 自定义弧形裁剪器 #

class TopArcClipper extends CustomClipper<Path> {
  final double gapWidth; // 缺口宽度
  final double gapHeight; // 缺口深度

  TopArcClipper({this.gapWidth = 120, this.gapHeight = 30});

  @override
  Path getClip(Size size) {
    final path = Path();
    // 起点：左侧缺口底部
    path.moveTo(0, gapHeight);
    // 绘制顶部弧形缺口：二次贝塞尔曲线，中间点为缺口最顶端
    path.quadraticBezierTo(
      size.width / 2, // 曲线控制点X（容器中点）
      0, // 曲线控制点Y（缺口顶端）
      size.width - gapWidth / 2, // 曲线终点X（右侧缺口底部）
      gapHeight, // 曲线终点Y（右侧缺口底部）
    );
    // 绘制容器右侧边
    path.lineTo(size.width, size.height);
    // 绘制容器底部边
    path.lineTo(0, size.height);
    // 闭合路径，回到起点
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant TopArcClipper oldClipper) {
    // 只有当缺口参数变化时才重新裁剪
    return oldClipper.gapWidth != gapWidth || oldClipper.gapHeight != gapHeight;
  }
}

2. 使用示例 #

把需要的内容用ClipPath包裹，指定上面的裁剪器即可：

ClipPath(
  clipper: TopArcClipper(gapWidth: 150, gapHeight: 40), // 可自定义缺口大小
  child: Container(
    width: double.infinity,
    height: 200,
    color: Colors.blue, // 容器背景色
    child: const Center(
      child: Text(
        "带顶部弧形缺口的容器",
        style: TextStyle(color: Colors.white, fontSize: 18),
      ),
    ),
  ),
)

说明 #

• 裁剪器会直接剪掉顶部的弧形区域，所以该区域会完全透明，能看到下方的内容
• 通过调整gapWidth和gapHeight可以控制缺口的宽度和深度，适配不同需求
• 如果需要更圆润的弧形，可以改用arcTo方法，不过二次贝塞尔曲线已经能满足大部分场景

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