flutter - 如何绘制这样的自定义颤振边框?
解决方案
我做了一个CustomPainter
来绘制形状:
class MyPainter extends CustomPainter {
Color color;
MyPainter({@required this.color});
@override
void paint(Canvas canvas, Size size) {
Paint paint = new Paint()
..color = color
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke
..strokeWidth = 2;
var path = Path();
final double startPoint = size.width * 0.2;
final double rheight = 30;
path.moveTo(startPoint, rheight);
path.lineTo(startPoint + 20, 0);
path.lineTo(startPoint + 40, rheight);
path.moveTo(0, rheight);
path.lineTo(startPoint, rheight);
path.moveTo(startPoint + 40, rheight);
path.lineTo(size.width, rheight);
path.lineTo(size.width, size.height);
path.moveTo(0, rheight);
path.lineTo(0, size.height);
path.moveTo(0, size.height);
path.lineTo(size.width, size.height);
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
用法:
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Padding(
padding: const EdgeInsets.all(30.0),
child: CustomPaint(
painter: MyPainter(color: Colors.black.withOpacity(0.2)),
child: Container(
height: 300,
)
),
),
),
);
}
结果:
更新:这是一个弯曲的边缘版本:
class MyPainter extends CustomPainter {
Color color;
MyPainter({@required this.color});
@override
void paint(Canvas canvas, Size size) {
Paint paint = new Paint()
..color = color
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke
..strokeWidth = 2;
var path = Path();
final double startPoint = size.width * 0.2;
final double rheight = 30;
path.moveTo(startPoint, rheight);
path.lineTo(startPoint + 20, 5);
path.cubicTo(startPoint + 23, 0, startPoint + 26, 0,
startPoint + 29, 0);
path.lineTo(startPoint + 50, rheight);
path.moveTo(10, rheight);
path.lineTo(startPoint, rheight);
path.moveTo(startPoint + 50, rheight);
path.lineTo(size.width - 10, rheight);
path.cubicTo(size.width, rheight + 5, size.width, rheight + 10,
size.width, rheight + 15);
path.lineTo(size.width, size.height - 15);
path.moveTo(10, rheight);
path.cubicTo(0, rheight + 5, 0, rheight + 10,
0, rheight + 15);
path.lineTo(0, size.height - 10);
path.cubicTo(5, size.height, 10, size.height,
15, size.height);
path.moveTo(15, size.height);
path.lineTo(size.width - 10, size.height);
path.cubicTo(size.width, size.height - 5, size.width, size.height - 10,
size.width, size.height - 15);
path.moveTo(size.width - 5, size.height);
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
结果:
推荐阅读
- c# - 如何从 WPF 应用程序执行“Set-ProcessMitigation -Name myapplication.exe -Enable PreferSystem32”PowerShell 命令
- c++ - Windows/C++/DLL:加载 DLL 后,函数指针偏移量(从内存中的 DLL 基地址)是否始终相同?
- css - 使显示不显示的 HTML 元素
- spring-boot - 安全性未从 Open API 生成器添加到 Swagger
- javascript - 可以在图表点上显示值
图表 - ReactJS - visual-studio-code - 按键插入某些运算符(字符行)
- html - 在同一行中对齐 div 而不使用浮点数和宽度
- laravel - 在 Laravel 中未处于调试模式时如何阻止某些路由?
- matlab - Matlab - 结合两个曲面图
- ajax - Ajax 调用 Symfony 控制器