英文:
Flutter use ClipPath on Column Container
问题
我正在尝试使用Flutter做一些个人项目。我正在学习一些关于复杂UI的知识，这确实很难。我查阅了文档，一些博客，但仍然不知道如何在Flutter ClipPath中正确定义x、y坐标点。
我的想法是，不是让这个三角形有一个光滑的曲线形状。我尝试了不同的组合，仍然不知道如何剪切和曲线这个三角形。
我的当前自定义剪切器大致如下：
@override
Path getClip(Size size) {
Path path = Path();
path.lineTo(size.width, size.height * 0.5);
path.lineTo(0, size.height);
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
有关如何正确剪切这个三角形的x、y坐标的建议将不胜感激。我知道我必须在Flutter中使用二次贝塞尔曲线，但在这一点上我基本上陷入了困境。
谢谢！
英文:
I'm playing around with flutter doing some personal projects. I'm learning a bit about complex UIs and it's been quite hard. I've looked into documentation, some blogs, and still have no idea how to properly define x, y points using Flutter ClipPath.
My idea is to instead of having this triangle have a smooth curve shape. I've tried with different combinations, still no idea how to clip and curve this triangle.
My current custom clipper it's something like this.
@override
Path getClip(Size size) {
Path path = Path();
path.lineTo(size.width, size.height * 0.5);
path.lineTo(0, size.height);
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
Any advice on how to get the x,y coordinates to clip properly this triangle is much appreciated. I know I have to use the quadratic bezier in flutter, but at this point I'm pretty much stuck.
Thanks!
答案1
得分: 0
以下是基于@pskink的建议的示例。只需将您的CustomClipper类中的.lineTo()调用替换为.cubicTo()调用。
您可以更改Container的高度和宽度以及cubicTo()调用中的x/y值，以改变曲线的形状。
如果您想绘制特定的曲线/形状，您需要首先进行数学计算，以计算出确切的坐标。
class CurveClipper extends StatelessWidget {
const CurveClipper({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Curve Clipper'),
),
body: Center(
child: ClipPath(
clipper: CustomBezierClipper(),
child: Container(
color: Colors.blueGrey,
height: 200,
width: 50,
),
),
),
);
}
}
class CustomBezierClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path();
path.cubicTo(0, size.height / 4, size.width, size.height / 4, size.width,
size.height / 2);
path.cubicTo(size.width, size.height * 3 / 4, 0, size.height * 3 / 4, 0,
size.height);
path.close();
return path;
}
@override
bool shouldReclip(covariant CustomClipper oldClipper) => false;
}
注意：上述代码是一个Flutter应用程序中用于创建自定义剪切区域的示例。
英文:
Below is an example based on @pskink's suggestion. Just replace the .lineTo() calls in your CustomClipper class with .cubicTo() calls.
You can change the height and width of the Container and the x/y values in the cubicTo() calls to alter the shape of the curve.
If you want to draw specific curves/shapes, you will have to do the Maths first to calculate the exact coordinates.
class CurveClipper extends StatelessWidget {
const CurveClipper({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Curve Clipper'),
),
body: Center(
child: ClipPath(
clipper: CustomBezierClipper(),
child: Container(
color: Colors.blueGrey,
height: 200,
width: 50,
),
),
),
);
}
}
class CustomBezierClipper extends CustomClipper<Path> {
@override
getClip(Size size) {
Path path = Path();
path.cubicTo(0, size.height / 4, size.width, size.height / 4, size.width,
size.height / 2);
path.cubicTo(size.width, size.height * 3 / 4, 0, size.height * 3 / 4, 0,
size.height);
path.close();
return path;
}
@override
bool shouldReclip(covariant CustomClipper oldClipper) => false;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论