如何像提供的图像中那样生成clipPath

问题描述 投票:0回答:1

我想生成一个小部件,其小部件的路径类似于给定图像中的小路径。我在这里谈论的是应用程序屏幕的白色部分,其中包含信息。

enter image description here

下面的代码是我在尝试时尝试的,但是失败了!

 Path getClip(Size size) {
var path = new Path();
var controlpoint = Offset(10.0, size.height);
var endpoint = Offset(size.width / 2, size.height);

path.lineTo(0.0, size.height - 100);

path.quadraticBezierTo(
    controlpoint.dx, controlpoint.dy, endpoint.dx, endpoint.dy);

path.lineTo(size.width, size.height);
path.lineTo(size.width, 0.00);

return path;

请使用此代码帮助我:)

编辑:我已经读到了这一部分,但是我仍然被卡住了:(

**Path getClip(Size size) {
final path = Path();
path.lineTo(size.width, 100);
path.lineTo(size.width, size.height);
path.lineTo(0.00, size.height);
path.close();

return path;

} **

以及在自定义clipPath上方,使用ClipRRect。

enter image description here

android ios user-interface flutter clip-path
1个回答
0
投票

最后,一些使用该代码的游戏最终得到以下输出:

Path getClip(Size size) {
final path = Path();
path.lineTo(20.0, 0.0);
path.lineTo(size.width, 120);
path.lineTo(size.width, size.height);
path.lineTo(0.00, size.height);
path.close();

return path;

已经添加了一个像这样的父母:

ClipRRect(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(25.0),
            bottomLeft: Radius.circular(25.0),
          ),
          child: ClipPath(
          clipper: SinglePageClipper(),
          child: Container(
            color: Colors.red,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                SizedBox(
                  height: 400,
                ),
                Center(child: Text('Demo Page'),)
              ],
            ),
          ),
        ),
      ),

enter image description here

我认为这是可以改进的事情,因此将尝试这样做。但与此同时,如果有人有更好的方法。请给我们的知识以启发,因为这对于像我这样的初学者来说更浪费时间。

© www.soinside.com 2019 - 2024. All rights reserved.