Flutter中如何专业实现带边框的自定义容器形状？

方法一：自定义ShapeBorder（推荐） #

这是Flutter官方推荐的自定义形状方案，能直接配合Container的shape、border属性使用，完美支持边框和背景色分离。

以下是针对你示例形状的实现代码：

class CustomNotchedBorder extends ShapeBorder {
  final double borderWidth;
  final Color borderColor;
  final double notchSize; // 顶部缺口的大小

  CustomNotchedBorder({
    this.borderWidth = 2.0,
    this.borderColor = Colors.black,
    this.notchSize = 20.0,
  });

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.all(borderWidth);

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) {
    // 内容区域路径：比外边框小borderWidth，确保内容不会被边框覆盖
    return _getPath(rect.deflate(borderWidth), notchSize);
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    // 外边框路径
    return _getPath(rect, notchSize);
  }

  Path _getPath(Rect rect, double notchSize) {
    final path = Path();
    // 从左上角开始，绘制顶部左缺口
    path.moveTo(rect.left, rect.top + notchSize);
    path.lineTo(rect.left + notchSize, rect.top);
    // 顶部右缺口
    path.lineTo(rect.right - notchSize, rect.top);
    path.lineTo(rect.right, rect.top + notchSize);
    // 右侧边
    path.lineTo(rect.right, rect.bottom);
    // 底部边
    path.lineTo(rect.left, rect.bottom);
    // 左侧边
    path.lineTo(rect.left, rect.top + notchSize);
    path.close();
    return path;
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {
    final paint = Paint()
      ..color = borderColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = borderWidth;
    canvas.drawPath(getOuterPath(rect), paint);
  }

  @override
  ShapeBorder scale(double t) => CustomNotchedBorder(
        borderWidth: borderWidth * t,
        notchSize: notchSize * t,
      );
}

使用方式：

Container(
  width: 300,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.white,
    shape: CustomNotchedBorder(
      borderWidth: 2,
      borderColor: Colors.blue,
      notchSize: 25,
    ),
  ),
  child: const Center(child: Text('自定义边框容器')),
)

方法二：Stack + ClipPath（快速实现） #

如果不想写复杂的ShapeBorder，可以用嵌套容器的方式：外层容器做边框，内层容器放内容，两者用相同的ClipPath裁剪，内层比外层小边框宽度。

代码示例：

class CustomNotchedClipper extends CustomClipper<Path> {
  final double notchSize;

  CustomNotchedClipper(this.notchSize);

  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(0, notchSize);
    path.lineTo(notchSize, 0);
    path.lineTo(size.width - notchSize, 0);
    path.lineTo(size.width, notchSize);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.lineTo(0, notchSize);
    path.close();
    return path;
  }

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

使用方式：

Stack(
  alignment: Alignment.center,
  children: [
    // 外层边框容器
    ClipPath(
      clipper: CustomNotchedClipper(25),
      child: Container(
        width: 302, // 比内层宽2*borderWidth
        height: 202,
        color: Colors.blue,
      ),
    ),
    // 内层内容容器
    ClipPath(
      clipper: CustomNotchedClipper(25),
      child: Container(
        width: 300,
        height: 200,
        color: Colors.white,
        child: const Center(child: Text('自定义边框容器')),
      ),
    ),
  ],
)

关键说明 #

• 方法一的ShapeBorder更灵活，支持适配不同尺寸、响应式布局，还能结合Border的其他属性（比如不同边的宽度）扩展。
• 方法二更适合快速原型开发，但需要手动计算内外层的尺寸差，适配性稍差。
• 如果你需要的形状更复杂（比如曲线、不规则缺口），只需要修改路径绘制逻辑即可。

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