Flutter -背景自定义发票视图

r6l8ljro  于 2023-08-07  发布在  Flutter
关注(0)|答案(2)|浏览(145)

我想为发票视图的背景创建下锯齿外观。我如何做到这一点?我无法重新创建与自定义画家相同。
x1c 0d1x的数据
感谢您的建议。- 谢谢-谢谢

mqkwyuun

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;
  }
}

字符串


的数据

b4qexyjb

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;
  }
}

相关问题