Flutter-canvas-绘制虚线

绘制虚线

直接上图：

代码

import 'package:flutter/material.dart';

class DemoCanvas extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: new Text('Flutter 绘制虚线'),
        centerTitle: true,
      ),
      body: Container(
        color: Colors.white,
        child: CustomPaint(
          // size：当 child 为 null 时，代表默认绘制区域大小，如果有 child 则忽略此参数，画布尺寸则为 child 尺寸
          size: Size(MediaQuery.of(context).size.width, 300),
          painter: MyPainter(),),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {var paint = Paint() // 创建一个画笔并配置其属性
      ..strokeWidth = 2 // 画笔的宽度
      ..isAntiAlias = true // 是否抗锯齿
      ..color=Color(0x77cdb175); // 画笔颜色
    
    var max =  size.width; // size 获取到宽度
    print(size);
    var dashWidth = 5;
    var dashSpace = 5;
    double startX = 0;

    while (max >= 0) {canvas.drawLine(Offset(startX, 100.0), Offset(startX + dashWidth, 100.0), paint);
      final space = (dashSpace + dashWidth);
      startX += space;
      max -= space;
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

参考：https://stackoverflow.com/que…