flutter 我如何使用ClipPath做这个UI?以及如何以另一种方式完成?

zyfwsgd6  于 2023-06-07  发布在  Flutter
关注(0)|答案(1)|浏览(188)

我尝试了下面的代码,什么是最好的方式做的曲线.我的代码分为两部分:首先使用堆栈包裹整个屏幕,然后使用CustomBigArcClipper的功能

return Scaffold(
      backgroundColor: Colors.blue,
      body: Stack(
        alignment: Alignment.center,
        children: [
          Positioned(
            top: 0,
            bottom: MediaQuery.of(context).size.height * 0.5,
            left: 0,
            right: 0,
            child: ClipPath(
              clipper: CustomBigArcClipper(),
              child: Container(
                height: 600,
                color: Colors.green,
              ),
            ),
          ),
        ],
      ),
    );


class CustomBigArcClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    double w = size.width;
    double h = size.height;
    path.lineTo(0, h);
    path.quadraticBezierTo(w * 0.5, h - 100, w, h);
    path.lineTo(w, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }
}

kgqe7b3p

kgqe7b3p1#

你可以把形状分成两部分,上面一部分是矩形,下面一部分是半圆形。

class CustomBigArcClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    double w = size.width;
    double h = size.height;
    path.addRect(Rect.fromLTWH(0, 0, w, h * 0.5));
    path.addOval(Rect.fromCircle(
      center: Offset(w * 0.5, h * 0.5),
      radius: w / 2,
    ));
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }
}

相关问题