flutter - 使用剪辑路径创建圆角
问题描述
通过 clipPath,我能够创建一个设计类似于我在下面发布的照片的小部件。唯一的问题是得到圆角,如照片中的箭头所示。
下面是我的代码:
class HomePage extends StatelessWidget {
const HomePage();
@override
Widget build(BuildContext context) {
return ClipPath(
child: Container(
color: appAccentColor,
width: double.infinity,
child: Text("data"),
),
clipper: ConvexClipPath(),
);
}
}
class ConvexClipPath extends CustomClipper<Path> {
double factor = 55;
@override
Path getClip(Size size) {
Path path = Path();
path.lineTo(0, size.height - size.height * (factor / 100));
path.quadraticBezierTo(size.width / 2, size.height - size.height * ((factor - 10) / 100), size.width, size.height - size.height * (factor / 100));
path.lineTo(size.width, 0);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
解决方案
我认为您必须path.quadraticBezierTo(x1, y1, x2, y2);
再次使用才能添加圆角。没有更简单的解决方案可以为拐角添加半径。您可以在此答案中看到一个示例,
或者考虑使用专用工具绘制 svg 并将其与parseSvgPathData(data)
Path 库一起使用。
推荐阅读
- javascript - geolocation.getCurrentPosition 问题
- sql - Teradata SQL - 创建临时表
- c++ - 在 Windows 中使用 Tesseract 4
- python - Google App Engine - 任务队列 - 如果满足条件,如何运行任务
- postgresql - 来自同一行的 2 个值的总和
- javascript - springboot中的Javascript fetch和@RequestAttribute
- python - 如何通过子进程向python发送多个参数
- razor - 如何发送参数和上传文件到一个动作
- php - 如何在magento中通过url查找模板?
- r - 在字符串中使用 $ grep