flutter 自定义梯形组件，使用构造函数传入参数

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/*
首先使用 moveTo 方法移动到左上角，然后使用 lineTo 方法依次连接四个点形成一个梯形，
最后使用 close 方法闭合路径。在 paint 方法中，我们使用 Canvas 对象的
 drawPath 方法绘制这个梯形。
*/
class TrapeziumPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Color.fromRGBO(235, 112, 3, 1);
    // final path = Path()
    //   ..moveTo(0, 0)
    //   ..lineTo(size.width * 0.8, 0.2)
    //   // 添加当前点到目标点（x，y）构成的直线到pathrLineTo(float dx, float dy)
    //   // //基于当前坐标系，即以path最后的那个点//为坐标系原点（0,0）
    //   // ，如果前面没有path的点，默认是屏幕左上角（0,0）
    //   ..lineTo(size.width *0.8, size.height)
    //   ..lineTo(size.width * 0.4, size.height*0.2)
    //   ..close();
    Path path = Path();
    path
      ..relativeMoveTo(0, 0) //左上
      ..relativeLineTo(350.w, 0) //右上
      ..relativeLineTo(-40.w, 100.w) //右下
      ..relativeLineTo(-280.w, 0); //左下
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

// 公共的梯形根据条件显示
/*
*参数type:0 1 2 来判断是第几个梯形

*/
class tixing1 extends CustomPainter {
  // final int type;
  final pageNumberData;
  /*
  定义梯形的颜色 需要的是fromrgbo颜色
  */
  final int color1;
  tixing1({this.pageNumberData, required this.color1});

  @override
  void paint(Canvas canvas, Size size) {
    print("调用了");
    print(pageNumberData);
    final paint = Paint()..color = Color(color1);
    if (pageNumberData["left"] != null) {
      Path path = Path();
      path
        ..relativeMoveTo(
            pageNumberData["left"][0], pageNumberData["left"][1]) //左上
        ..relativeLineTo(
            pageNumberData["top"][0], pageNumberData["top"][1]) //右上
        ..relativeLineTo(
            pageNumberData["right"][0], pageNumberData["right"][1]) //右下
        ..relativeLineTo(
            pageNumberData["bottom"][0], pageNumberData["bottom"][1]); //左下
      canvas.drawPath(path, paint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

// 创建一个公共的梯形设置每个角度的点的位置
class conmmonTixing extends StatefulWidget {
  // 所有组件属性都是要final
  // 所有组件widget都是不可变的
  // 定义四个点的偏移量

  final dynamic pageNumberData;
  /*
  定义梯形的颜色 需要的是fromrgbo颜色
  */
  final int color1;
  conmmonTixing(
      {super.key, required this.pageNumberData,required this.color1});

  @override
  State<conmmonTixing> createState() => _conmmonTixingState(pageNumberData: pageNumberData, color1: color1);
}

class _conmmonTixingState extends State<conmmonTixing> {
  // 定义四个点的偏移量

  final Map pageNumberData;
  /*
  定义梯形的颜色 需要的是fromrgbo颜色
  */
  final int color1;
  _conmmonTixingState({required this.pageNumberData,required this.color1 });
  @override
  initState(){
    print("获取到出具");
    print(pageNumberData);
    print(color1);
  }
  @override
  Widget build(BuildContext context) {
    // return Container();
    return CustomPaint(
      painter: tixing1(pageNumberData:pageNumberData, color1: color1),
    );
  }
}

页面中调用方法就可以了，使用conmmonTixing （） 并传入参数