Flutter 自绘组件 （CustomPaint与Canvas）绘制虚线、区域、直线

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('自绘组件示例'),
        ),
        body: Center(
          child: CustomPaint(
            size: Size(200, 200),
            painter: MyPainter(),
          ),
        ),
      ),
    );
  }
}
 
class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 2
      ..style = PaintingStyle.stroke; // 设置画笔为描边模式
 
    final path = Path();
    path.moveTo(10, 30); // 开始点
    path.relativeLineTo(100, 0); // 水平线
    path.relativeLineTo(0, 100); // 垂直线
    path.relativeLineTo(-100, 0); // 水平线
    path.close(); // 关闭路径形成闭环，形成一个矩形
 
    canvas.drawPath(path, paint);
  }
 
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

这段代码创建了一个自定义的CustomPaint组件，并在其中定义了一个MyPainter类，该类使用Path来绘制一个矩形。这个矩形由直线组成，展示了如何使用Path来绘制复杂的形状。代码中使用了..连接符进行链式调用，使得代码更加简洁。shouldRepaint返回false意味着当这个自定义绘画不需要重新绘制时，可以减少不必要的性能开销。