如何在Flutter中创建符合预期效果的弧形Container？

你用BorderRadius的方式之所以达不到预期效果，是因为这种方式的圆弧是基于容器边角的位置计算的，当容器宽度远大于高度时，设置大半径只会得到非常平缓的弧形，无法实现示例图里的特定弧度。下面给你两种精准控制弧形的实现方式：

方式一：使用ClipPath自定义裁剪 #

这种方式通过自定义裁剪路径来绘制弧形，灵活性最高：

首先定义裁剪器：

class ArcClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    // 从左上角出发，到左侧弧形起始点
    path.lineTo(0, size.height - 60);
    // 绘制底部圆弧，可调整radius值改变弧度大小
    path.arcToPoint(
      Offset(size.width, size.height - 60),
      radius: const Radius.circular(180),
      clockwise: false,
    );
    // 从右侧弧形终点回到右上角，闭合路径
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

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

然后在布局中使用：

ClipPath(
  clipper: ArcClipper(),
  child: Container(
    height: 250,
    width: double.infinity,
    color: Colors.red,
  ),
)

方式二：使用ShapeDecoration自定义形状 #

如果你想通过Container的decoration属性实现，可以自定义ShapeBorder：

class ArcShape extends ShapeBorder {
  final double arcDepth;

  ArcShape({this.arcDepth = 60});

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.zero;

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

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    final path = Path();
    // 定位弧形起始点
    path.lineTo(rect.left, rect.bottom - arcDepth);
    // 以容器宽度的一半为半径绘制圆弧，保证弧度对称
    path.arcToPoint(
      Offset(rect.right, rect.bottom - arcDepth),
      radius: Radius.circular(rect.width / 2),
      clockwise: false,
    );
    path.lineTo(rect.right, rect.top);
    path.close();
    return path;
  }

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

  @override
  ShapeBorder scale(double t) => ArcShape(arcDepth: arcDepth * t);
}

使用方式：

Container(
  height: 250,
  width: double.infinity,
  decoration: ShapeDecoration(
    color: Colors.red,
    shape: ArcShape(arcDepth: 60),
  ),
)

你可以根据示例图的弧度，调整代码中的arcDepth、radius等参数，直到匹配预期效果。

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