Flutter中如何创建顶部向内弯曲的水平矩形Container组件

预期效果 #

已尝试代码 #

Container(
  width: Get.width,
  height: Get.height * 0.6,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.vertical(
      top: Radius.elliptical(Get.width, 50)
    ),
  ),
),

当前效果 #

解决办法 #

你用BorderRadius的方式只能做出向外凸的弧度，要实现向内凹的顶部，直接用ClipPath配合自定义裁剪路径就行：

代码实现 #

ClipPath(
  clipper: _TopInnerCurveClipper(),
  child: Container(
    width: Get.width,
    height: Get.height * 0.6,
    color: Colors.white,
  ),
)

// 自定义裁剪器
class _TopInnerCurveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    // 从左下角开始绘制路径
    path.moveTo(0, size.height);
    // 连线到右下角
    path.lineTo(size.width, size.height);
    // 连线到右上角
    path.lineTo(size.width, 0);
    // 绘制右上角到左上角的内凹二次贝塞尔曲线
    path.quadraticBezierTo(
      size.width / 2, // 曲线控制点的x坐标（屏幕中点）
      50, // 曲线控制点的y坐标，数值越大内凹越深
      0, // 曲线终点的x坐标（左上角）
      0, // 曲线终点的y坐标（左上角）
    );
    // 闭合路径
    path.close();
    return path;
  }

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

说明 #

• 用quadraticBezierTo画二次贝塞尔曲线，把控制点的y值设为正数，就能让顶部中间向内凹；想调整凹的深度，改这个y值就行，比如改成60凹得更深。
• 这种方式比BorderRadius灵活得多，能精准控制内凹的形状。

内容的提问来源于stack exchange，提问作者Ahmed Wagdi