如何以中心向外的弧形夹住容器的底部答案

【问题标题】：How to clip bottom of container with arc outward in center如何以中心向外的弧形夹住容器的底部
【发布时间】：2021-05-03 07:45:46
【问题描述】：

我想剪下如图所示的容器底部

我已经对圆圈进行了编码，但是我如何才能实现剩余部分

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.0, size.height - 90);

    var firstControlPoint = Offset(size.width / 5, size.height);
    var firstPoint = Offset(size.width / 2, size.height);
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstPoint.dx, firstPoint.dy);

    var secondControlPoint = Offset(size.width - (size.width / 5), size.height);
    var secondPoint = Offset(size.width, size.height - 90);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondPoint.dx, secondPoint.dy);

    path.lineTo(size.width, 0);
    path.close();

    return path;
  }

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

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

Stack(
    alignment: Alignment.bottomCenter,
    children: [
      Container(
        margin: EdgeInsets.only(bottom: 24),
        padding: EdgeInsets.symmetric(vertical: 4),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            bottomRight: Radius.circular(15),
            bottomLeft: Radius.circular(15),
          ),
          border: Border.all(
            color: Colors.grey.withOpacity(0.5),
          ),
        ),
        child: Container(height: 100),
      ),
      Container(
        padding: EdgeInsets.all(4),
        decoration: BoxDecoration(
            shape: BoxShape.circle, color: Colors.white),
        child: CircleAvatar(
            radius: 24,
            backgroundColor: Colors.green,
            child: Icon(
              Icons.arrow_forward,
              color: Colors.white,
            )),
      ),
    ],
  )

【讨论】：

你能解释一下吗...圆形图标有大小框吗？
仅适用于底部剪辑。我会为你更新我的答案。
是的，请详细回答.. 感谢您的宝贵时间
流元素上的堆栈没有被点击......这个解决方案不起作用......

【解决方案2】：

在对自定义裁剪器代码进行了数小时的试验后，我终于做到了。这是像图像一样剪辑的最终代码。

@override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.0, size.height - 45);
    path.lineTo(size.width / 2.7 , size.height -45);

    var firstControlPoint = Offset(size.width / 2.5, size.height - 5);
    var firstPoint = Offset(size.width / 2, size.height);
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstPoint.dx, firstPoint.dy);

    var secondControlPoint = Offset(size.width / 1.6 , size.height-5);
    var secondPoint = Offset(size.width / 1.6 , size.height -45);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondPoint.dx, secondPoint.dy);

    path.lineTo(size.width , size.height -45);
    path.lineTo(size.width, 0.0);
    path.close();

    return path;
  }

现在剪掉的角不是圆角的。我必须找到解决方案！！！

【讨论】：