求Flutter中带曲线边框的Container最优实现方案（附参考图）

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

这种方式可直接为Container的shape属性赋值，复用性强，能完美配合decoration的边框、背景色等属性。

自定义ShapeBorder代码： #

class CurvedBorder extends ShapeBorder {
  final double curveRadius;

  CurvedBorder({this.curveRadius = 20.0});

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.zero;

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) {
    return getOuterPath(rect, textDirection: textDirection);
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    final path = Path();
    // 左上角起点
    path.moveTo(rect.left + curveRadius, rect.top);
    // 顶部直线到右上角曲线起点
    path.lineTo(rect.right - curveRadius, rect.top);
    // 右上角向内凹陷曲线
    path.quadraticBezierTo(
      rect.right, rect.top,
      rect.right, rect.top + curveRadius,
    );
    // 右侧直线到右下角曲线起点
    path.lineTo(rect.right, rect.bottom - curveRadius);
    // 右下角向内凹陷曲线
    path.quadraticBezierTo(
      rect.right, rect.bottom,
      rect.right - curveRadius, rect.bottom,
    );
    // 底部直线到左下角曲线起点
    path.lineTo(rect.left + curveRadius, rect.bottom);
    // 左下角向内凹陷曲线
    path.quadraticBezierTo(
      rect.left, rect.bottom,
      rect.left, rect.bottom - curveRadius,
    );
    // 左侧直线到左上角曲线起点
    path.lineTo(rect.left, rect.top + curveRadius);
    // 左上角向内凹陷曲线
    path.quadraticBezierTo(
      rect.left, rect.top,
      rect.left + curveRadius, rect.top,
    );
    path.close();
    return path;
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {}

  @override
  ShapeBorder scale(double t) => CurvedBorder(curveRadius: curveRadius * t);
}

使用方式： #

Container(
  width: 300,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: Colors.blue, width: 2),
    shape: CurvedBorder(curveRadius: 30), // 调整curveRadius控制曲线弧度
  ),
  child: const Center(child: Text("带曲线边框的Container")),
)

方案二：使用ClipPath裁剪 #

若仅需裁剪容器轮廓，可通过ClipPath实现，适合不需要精细边框样式的场景。

自定义Clipper代码： #

class CurvedClipper extends CustomClipper<Path> {
  final double curveRadius;

  CurvedClipper({this.curveRadius = 20.0});

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

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

使用方式： #

ClipPath(
  clipper: CurvedClipper(curveRadius: 30),
  child: Container(
    width: 300,
    height: 200,
    decoration: BoxDecoration(
      color: Colors.white,
      border: Border.all(color: Colors.blue, width: 2),
    ),
    child: const Center(child: Text("带曲线边框的Container")),
  ),
)

方案对比 #

• 方案一的ShapeBorder更适配Container的设计体系，无需额外嵌套容器，边框和背景色的渲染更自然。
• 方案二的ClipPath更适合简单裁剪场景，但边框可能因裁剪出现边缘模糊的情况。

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