颤振：无法制作剪辑路径

Question

有人可以帮我解决 Flutter 中的这个 ClipPath 吗？

我无法制作底部边框。

另外，我怎样才能让它作为 Row 孩子可见？

我注意到它可以在 Container 中使用，但是当我将 Container（或 Flexible）拖到 Row 中或没有小部件时它不起作用。

更新

这是 ClipPath 不可见时的返回

Scaffold(
  body: SafeArea(
    child: Row(
      children: [
        Flexible(
          child: ClipPath(
            clipper: AuthClipPath(),
            child: Container(
            height: size.height * .75,
            decoration: BoxDecoration(gradient: gradient),
            child: authForm(),
            ),
          ),
        )
      ],
    ),
  ),
)

这是 ClipPath 可见时的返回

Scaffold(
  body: SafeArea(
    child: Container(
      child: ClipPath(
        clipper: AuthClipPath(),
        child: Container(
        height: size.height * .75,
        decoration: BoxDecoration(gradient: gradient),
        child: authForm(),
      ),
    ),
  )       
)

这是来自 ClipPath 的剪辑器类

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

    Offset firstControlPoint = Offset(size.width / 4, size.height);
    Offset firstPoint = Offset(size.width / 2, size.height);

    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstPoint.dx, firstPoint.dy);

    Offset secondControlPoint = Offset(size.width / 4 * 3, size.height);
    Offset secondPoint = Offset(size.width, size.height - 30);

    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondPoint.dx, secondPoint.dy);

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

    return path;
  }

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

灵活的小部件与可见性无关。

谢谢！

Answer 1

在Row() 中像这样使用你的AuthClipPath()

home: Scaffold(
    body: SafeArea(
      child: Row(
        children: [
          Flexible(
            child: ClipPath(
              clipper: AuthClipPath(),
              child: Container(
                height: 300,
                color: Colors.amber.shade200,
              ),
            ),
          ),
        ],
      ),
    ),
  ),

你可以像这样实现波浪效果。您可以随时根据需要进行调整。

Path path = Path();
path.moveTo(size.width, 0);
path.lineTo(0, 0);
path.quadraticBezierTo(
    0, size.height * 0.4500000, 0, size.height * 0.6000000);
path.cubicTo(
    size.width * 0.3000000,
    size.height * 0.9000000,
    size.width * 0.7000000,
    size.height * 0.3000000,
    size.width,
    size.height * 0.6000000);
path.quadraticBezierTo(
    size.width, size.height * 0.4500000, size.width, 0);
path.close();

return path;