如何在Flutter中用Custom Painter实现指定自定义形状？

你可以通过CustomClipper自定义裁剪路径来实现这个顶部带凹口的Container形状，具体实现如下：

1. 定义自定义裁剪器 #

创建一个继承自CustomClipper<Path>的类，在getClip方法中绘制目标形状的路径：

class NotchTopClipper extends CustomClipper<Path> {
  final double notchWidth;
  final double notchDepth;
  final double notchRadius;

  NotchTopClipper({
    this.notchWidth = 60.0,
    this.notchDepth = 20.0,
    this.notchRadius = 10.0,
  });

  @override
  Path getClip(Size size) {
    final path = Path();
    // 绘制底部和右侧边框
    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    
    // 绘制顶部中间的凹口
    final rightNotchStart = size.width - notchWidth / 2;
    path.lineTo(rightNotchStart, 0);
    // 右侧圆弧
    path.arcToPoint(
      Offset(size.width / 2, notchDepth),
      radius: Radius.circular(notchRadius),
      clockwise: false,
    );
    // 左侧圆弧
    path.arcToPoint(
      Offset(notchWidth / 2, 0),
      radius: Radius.circular(notchRadius),
      clockwise: false,
    );
    
    // 回到左上角闭合路径
    path.lineTo(0, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(NotchTopClipper oldClipper) => false;
}

2. 使用裁剪器包裹Container #

将需要自定义形状的Container用ClipPath包裹，传入上面的裁剪器：

ClipPath(
  clipper: NotchTopClipper(
    // 可根据需求调整参数
    notchWidth: 70.0,
    notchDepth: 25.0,
  ),
  child: Container(
    width: 320,
    height: 180,
    decoration: BoxDecoration(
      color: Colors.blueAccent,
      // 可选：添加阴影增强视觉效果
      boxShadow: [
        BoxShadow(
          blurRadius: 8,
          color: Colors.black12,
          offset: Offset(0, 2),
        )
      ]
    ),
    child: const Center(
      child: Text(
        "自定义形状容器",
        style: TextStyle(color: Colors.white, fontSize: 18),
      ),
    ),
  ),
)

说明 #

• 通过调整NotchTopClipper的构造参数，可以灵活修改凹口的宽度、深度和圆弧半径，匹配你的设计需求
• 使用ClipPath包裹Container可以保留Container的所有原有特性（如背景装饰、子组件布局等）
• 如果需要更复杂的形状，可以在getClip方法中修改路径绘制逻辑

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