本文介绍了如何在 Flutter 中创建带有圆角的自定义模糊形状的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想绘制一个类似于下图标记区域的自定义形状.有没有办法用模糊效果剪辑这个自定义形状,然后指定角的半径?
解决方案
这里是
类 Customclipper 扩展 CustomClipper;{@覆盖路径 getClip(Size size) {var 路径 = 新路径();path.lineTo(0.0, size.height - 20);path.quadraticBezierTo(0.0, size.height, 20.0, size.height);path.lineTo(size.width - 20.0, size.height);path.quadraticBezierTo(size.width, size.height, size.width, size.height - 20);path.lineTo(size.width, 50.0);path.quadraticBezierTo(size.width, 30.0, size.width - 20.0, 30.0);path.lineTo(20.0, 5.0);path.quadraticBezierTo(0.0, 0.0, 0.0, 20.0);返回路径;}@覆盖bool shouldReclip(CustomClipper<Path> oldClipper) =>错误的;}
- 使用 quadraticBezierTo 创建所有圆角
- 在 ClipPath 中创建了一个容器
- 使用 Colors.white70 作为容器颜色
I want to draw a custom shape similar to the marked area of below image. Is there a way to clip this custom shape with blur effect and then specify the radius for the corners?
解决方案
Here is thefull example
class Customclipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = new Path();
path.lineTo(0.0, size.height - 20);
path.quadraticBezierTo(0.0, size.height, 20.0, size.height);
path.lineTo(size.width - 20.0, size.height);
path.quadraticBezierTo(size.width, size.height, size.width, size.height - 20);
path.lineTo(size.width, 50.0);
path.quadraticBezierTo(size.width, 30.0, size.width - 20.0, 30.0);
path.lineTo(20.0, 5.0);
path.quadraticBezierTo(0.0, 0.0, 0.0, 20.0);
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
- Created all the rounded corners using quadraticBezierTo
- Created a Container inside a ClipPath
- Used the Colors.white70 for the container color
这篇关于如何在 Flutter 中创建带有圆角的自定义模糊形状的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!