如何在底部中心向外夹出半圆的容器答案

【问题标题】：How to clip the container with half circle outward in bottom center如何在底部中心向外夹出半圆的容器
【发布时间】：2021-08-26 08:05:54
【问题描述】：

我有这个设计，我想创建

我试过这段代码：

@override
  Path getClip(Size size) {
    var path = Path();

    path.lineTo(0.0, size.height - 50);
    path.lineTo(size.width / 2 - 35 , size.height -50);

    path.quadraticBezierTo(size.width / 2 - 35 , size.height , size.width / 2 + 120 , size.height);

    path.quadraticBezierTo(size.width /2 + 35 , size.height, size.width / 2 + 35, size.height - 50);

    path.lineTo(size.width / 2 + size.width, size.height - 50);
    path.lineTo(size.width, 0.0);

    path.close();
    return path;


  }

但我没有做......我得到的结果是

我不明白我做错了什么。请帮助我，我也想要在底部剪裁后的阴影。但我没有让事情变得可见我将脚手架的颜色更改为灰色

【问题讨论】：

标签： flutter android-studio dart flutter-layout

【解决方案1】：

你真的只需要画一条曲线而不是两条。

Path getClip(Size size) {
    final Path path = Path()
      ..lineTo(0, size.height - 35)
      ..lineTo((size.width / 2) - 50, size.height - 35)
      ..quadraticBezierTo(size.width / 2, size.height + 35, (size.width / 2) + 50, size.height - 35,)
      ..lineTo(size.width, size.height - 35)
      ..lineTo(size.width, 0)
      ..close();

    return path;
  }

【讨论】：

【解决方案2】：

调整高度并为剪辑路径添加阴影，我终于接近了预期的结果。

var path = Path();

path.lineTo(0.0, size.height - 50);
path.lineTo(size.width / 2 - 35 , size.height -50);

path.quadraticBezierTo(size.width / 2 - 35 , size.height - 25 , size.width / 2 , size.height -20);

path.quadraticBezierTo(size.width /2 + 35 , size.height -25 , size.width / 2 + 35, size.height - 50);

path.lineTo(size.width / 2 + size.width, size.height - 50);
path.lineTo(size.width, 0.0);

path.close();
return path;

图像容器现在看起来像这样

【讨论】：