使用ClipPath圈半圈

Question

我想建造这个

我这样使用ClipPath：

ClipPath(
  clipper: HeaderClipper(),
  child: Image.asset(
    "assets/images/stores/bg1.jpg",
    fit: BoxFit.cover,
  ),
),

这是我的HeaderClipper班：

class HeaderClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();

    final heightFactor = 5 / 8;

    path.lineTo(0, size.height * heightFactor);

    path.quadraticBezierTo(
      50,
      size.height,
      size.width / 4,
      size.height,
    );

    path.lineTo(size.width * (3 / 4), size.height);

    path.quadraticBezierTo(
      size.width - 50,
      size.height,
      size.width,
      size.height * heightFactor,
    );

    path.lineTo(size.width, 0);

    path.close();

    return path;
  }

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

但是我不知道为什么它看起来不像图片。您能帮我更改哪些参数，还是应该使用其他方法代替quadraticBezierTo？

Answer 1

您只需使用-ClipRRect

代码：

ClipRRect(
      borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(140.0),
          bottomRight: Radius.circular(140.0)),
      child: Container(
        child:
            Image(image: NetworkImage('https://placeimg.com/640/480/people')),
      ),
    )