我想为发票视图的背景创建下锯齿外观。我如何做到这一点?我无法重新创建与自定义画家相同。x1c 0d1x的数据感谢您的建议。- 谢谢-谢谢
mqkwyuun1#
您可以使用自定义裁剪器来实现这一点
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: MyWidget(), ), ); } } class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return ClipPath( clipper: ZigZagClipper(), child: Container( height: 600, width: 500 , color: Colors.white, ), ); } } class ZigZagClipper extends CustomClipper<Path> { @override Path getClip(Size size) { Path path = Path(); path.lineTo(0, size.height); double x = 0; double y = size.height; double increment = size.width / 20; while (x < size.width) { x += increment; y = (y == size.height) ? size.height * .95 : size.height; path.lineTo(x, y); } path.lineTo(size.width, 0.0); path.close(); return path; } @override bool shouldReclip(CustomClipper old) { return old != this; } }
字符串
的数据
b4qexyjb2#
ClipPath( clipper: ZigZagClipper(), child: Container( color: Colors.white, child: CustomPaint( painter: BorderPainter(color: ColorConstants.cardStrokeColor), child: Padding( padding: EdgeInsets.all(16.sp), child: [content], ), ), ), )```
字符串使用这个锯齿形裁剪器的剪辑和边界画家给予边界
import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; class ZigZagClipper extends CustomClipper<Path> { @override Path getClip(Size size) { double factor = 8.sp; Path path = Path(); path.moveTo(factor, 0); path.arcToPoint(Offset(0, factor),radius: Radius.circular(8.sp),clockwise:false ); // path.quadraticBezierTo(factor, 0, 0, factor); path.lineTo(0, size.height); double x = 0; double y = size.height; double increment = size.width/50; while (x < size.width) { if(x+increment>size.width){ x += size.width-x; } else{ x += increment; } y = (y == size.height) ? size.height -increment : size.height; path.lineTo(x, y); } path.lineTo(size.width, factor); path.arcToPoint(Offset(size.width-factor, 0),radius: Radius.circular(8.sp),clockwise:false ); path.close(); return path; } @override bool shouldReclip(CustomClipper old) { return old != this; } } class BorderPainter extends CustomPainter { Color color; BorderPainter({ required this.color}); @override void paint(Canvas canvas, Size size) { double factor = 8.sp; Paint paint = Paint() ..color = color ..strokeCap = StrokeCap.round ..style = PaintingStyle.stroke ..strokeWidth = 1; Path path = Path(); path.moveTo(factor, 0); path.arcToPoint(Offset(0, factor),radius: Radius.circular(8.sp),clockwise:false ); // path.quadraticBezierTo(factor, 0, 0, factor); path.lineTo(0, size.height); double x = 0; double y = size.height; double increment = size.width/50; while (x < size.width) { if(x+increment>size.width){ x += size.width-x; } else{ x += increment; } y = (y == size.height) ? size.height -increment : size.height; path.lineTo(x, y); } path.lineTo(size.width, factor); path.arcToPoint(Offset(size.width-factor, 0),radius: Radius.circular(8.sp),clockwise:false ); path.close(); canvas.drawPath(path, paint); } @override bool shouldRepaint(CustomPainter oldDelegate) { return true; } }
型
2条答案
按热度按时间mqkwyuun1#
您可以使用自定义裁剪器来实现这一点
字符串
的数据
b4qexyjb2#
字符串
使用这个锯齿形裁剪器的剪辑和边界画家给予边界
型