Flutter 如何使用ClipPath，使其不会夹在子窗口小部件之外？

我正试图根据自定义路径剪裁我的小部件，但是我的自定义剪裁器对于我的子小部件来说太大了。如何将自定义裁剪器调整为我的子部件的大小？有没有其他方法可以用颤振路径剪裁小部件

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orange,
      body: SafeArea(
        child: Center(
          child: ClipPath(
            child: Container(
              color: Colors.pink,
              height: 200,
              width: 200,
            ),
            clipper: MyCustomClipper(),
          ),
        ),
      ),
    );
  }


class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path()
      ..moveTo(1305.0, 3204.0)
      ..cubicTo(874.0, 3124.0, 514.0, 2886.0, 263.0, 2515.0)
      ..cubicTo(166.0, 2371.0, 81.0, 2167.0, 34.0, 1965.0)
      ..cubicTo(-2.0, 1804.0, -12.0, 1523.0, 15.0, 1354.0)
      ..cubicTo(112.0, 733.0, 556.0, 219.0, 1136.0, 56.0)
      ..cubicTo(1306.0, 8.0, 1399.0, -3.0, 1590.0, 2.0)
      ..cubicTo(1852.0, 9.0, 2049.0, 59.0, 2259.0, 171.0)
      ..cubicTo(2711.0, 412.0, 3012.0, 834.0, 3096.0, 1346.0)
      ..cubicTo(3118.0, 1476.0, 3120.0, 1734.0, 3101.0, 1855.0)
      ..cubicTo(3037.0, 2259.0, 2839.0, 2616.0, 2541.0, 2864.0)
      ..cubicTo(2439.0, 2949.0, 2338.0, 3013.0, 2205.0, 3076.0)
      ..cubicTo(2077.0, 3136.0, 2006.0, 3162.0, 1878.0, 3191.0)
      ..cubicTo(1755.0, 3220.0, 1428.0, 3227.0, 1305.0, 3204.0)
      ..close()
      ..moveTo(1780.0, 2271.0)
      ..cubicTo(2047.0, 2181.0, 2235.0, 1954.0, 2268.0, 1685.0)
      ..cubicTo(2276.0, 1610.0, 2270.0, 1489.0, 2254.0, 1437.0)
      ..cubicTo(2181.0, 1194.0, 2015.0, 1018.0, 1780.0, 938.0)
      ..cubicTo(1691.0, 908.0, 1676.0, 906.0, 1550.0, 906.0)
      ..cubicTo(1424.0, 906.0, 1409.0, 908.0, 1320.0, 938.0)
      ..cubicTo(1020.0, 1042.0, 830.0, 1302.0, 830.0, 1609.0)
      ..cubicTo(830.0, 1942.0, 1060.0, 2216.0, 1405.0, 2296.0)
      ..cubicTo(1443.0, 2305.0, 1504.0, 2308.0, 1575.0, 2306.0)
      ..cubicTo(1666.0, 2303.0, 1701.0, 2297.0, 1780.0, 2271.0)
      ..close();
    return path;
  }

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

@覆盖
小部件构建（构建上下文）{
返回脚手架(
背景颜色：Colors.orange，
正文：安全区(
儿童：中心(
孩子：克利帕斯(
子：容器(
颜色：颜色。粉红色，
身高：200，
宽度：200，
),
clipper:MyCustomClipper（），
),
),
),
);
}
类MyCustomClipper扩展了CustomClipper{
@凌驾
路径getClip（大小）{
路径路径=路径（）
…移动到（1305.03204.0）
…cubicTo（874.0、3124.0、514.0、2886.0、263.0、2515.0）
…cubicTo（166.02371.0,81.02167.0,34.01965.0）
…立方英尺（-2.01804.0，-12.01523.0,15.01354.0）
…cubicTo（112.0733.0556.01219.01136.056.0）
…cubicTo（1306.0,8.0,1399.0，-3.0,1590.0,2.0）
…cubicTo（1852.0,9.0,2049.0,59.0,2259.0,171.0）
…cubicTo（2711.0412.00134.096.01346.0）
…cubicTo（3118.01476.03120.01734.03101.01855.0）
…cubicTo（3037.0、2259.0、2839.0、2616.0、2541.0、2864.0）
…cubicTo（2439.0、2949.0、2338.0、3013.0、2205.0、3076.0）
…cubicTo（2077.03136.012006.03162.01878.03191.0）
…cubicTo（1755.0、3220.0、1428.0、3227.0、1305.0、3204.0）
…关闭（）
…移动到（1780.02271.0）
…cubicTo（2047.0、2181.0、2235.0、1954.0、2268.0、1685.0）
…cubicTo（2276.011610.012270.01489.0254.01437.0）
…cubicTo（2181.01194.012015.01018.01780.0938.0）
…cubicTo（1691.0908.01676.0906.01550.0906.0）
…cubicTo（1424.0906.01409.0908.01320.0938.0）
…cubicTo（1020.01042.0830.01302.0830.01609.0）
…cubicTo（830.01942.01060.01216.010405.0296.0）
…cubicTo（1443.0、2305.0、1504.0、2308.0、1575.0、2306.0）
…cubicTo（1666.02303.01701.02297.01780.02271.0）
…关闭（）；
返回路径；
}
@凌驾
bool shouldReclip（CustomClipper oldClipper）=>false；
}

一个基本代码，显示一个被剪裁为孩子尺寸一半的三角形

main() => runApp(MaterialApp(home: SO()));

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        decoration: BoxDecoration(border: Border.all(width: 1,color: Colors.red)),//this container shows the actual size of the child widget marked by red border and it is w:200 by h:400
        child: ClipPath(
            clipper: CC(),//clips to half the size i.e. w->100,h->200
            child: Container(
                color: Colors.purple,
              width: 200,
              height: 400,
            )),
      ),
    );
  }
}

class CC extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var w = size.width;
    var h = size.height;
    print(w); //should be 200
    print(h); //should be 400

    //clips a triangle to half size of child
    Path p = Path();
    p.moveTo(0, 0);
    p.lineTo(w / 2, 0);
    p.lineTo(w / 2, h / 2);
    p.close();
    return p;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) => false;
}
enter code here

main（）=>runApp（MaterialApp（home:SO（））；
类因此扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（），
主体：容器(
装饰：box装饰（边框：border.all（宽度：1，颜色：Colors.red）），//此容器显示用红色边框标记的子小部件的实际大小，它是w:200 x h:400
孩子：克利帕斯(
clipper:CC（），//剪辑为大小的一半，即w->100，h->200
子：容器(
颜色：颜色，紫色，
宽度：200，
身高：400，
)),
),
);
}
}
类CC扩展了CustomClipper{
@凌驾
路径getClip（大小）{
var w=尺寸。宽度；
var h=尺寸、高度；
打印（w）；//应该是200
打印（h）；//应为400
//将三角形剪裁为孩子的一半大小
路径p=路径（）；
p、 moveTo（0,0）；
p、 lineTo（w/2，0）；
p、 线路图（w/2，h/2）；
p、 close（）；
返回p；
}
@凌驾
bool shouldReclip（CustomClipper oldClipper）=>false；
}
在这里输入代码

您在

getClip

函数中获得

Size-Size

。您可以使用它来获得绘图所允许的大小。此外，如果您在剪切时传递大小，或者使用大小小部件将其包装，则会得到大小。如果你想要一个例子，请发表评论。嘿@Doc，用一个SizedBox小部件包装ClipPath小部件并没有起到作用。也不在getClip函数中传递自定义大小参数。我真的可以在这里举个例子。所以你想让clippath依赖于你的子部件吗？发布了一个示例代码