我正试图根据自定义路径来剪辑我的小组件,但我的CustomClipper对我的儿童小组件来说太大了。我如何调整我的Custom Clipper的大小到我的子部件的大小?是否有任何其他方法来剪辑一个Flutter路径的小组件?
@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;
}
一个基本的代码,它显示了一个三角形剪裁到一半尺寸的儿童
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