flutter如何画虚线

在Flutter中如何绘制虚线？我尝试过使用CustomPainter，但只能画出实线。有没有现成的库或者简单的方法可以实现虚线效果？希望提供一个具体的代码示例。

2 回复

Flutter中画虚线可使用CustomPaint和Path结合PathMetric。通过PathMetric计算路径长度，按虚线模式分段绘制。示例代码可参考官方文档或第三方库如dashed_line。

更多关于flutter如何画虚线的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中绘制虚线可以通过 CustomPainter 和 PathMetric 实现。以下是完整示例：

1. 创建虚线绘制类

import 'package:flutter/material.dart';

class DashedLinePainter extends CustomPainter {
  final Color color;
  final double strokeWidth;
  final double dashWidth;
  final double dashSpace;

  DashedLinePainter({
    this.color = Colors.black,
    this.strokeWidth = 1.0,
    this.dashWidth = 5.0,
    this.dashSpace = 3.0,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = color
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.stroke;

    final path = Path();
    path.moveTo(0, size.height / 2);
    path.lineTo(size.width, size.height / 2);

    final pathMetrics = path.computeMetrics();
    for (final pathMetric in pathMetrics) {
      double distance = 0;
      while (distance < pathMetric.length) {
        final start = pathMetric.getTangentForOffset(distance)?.position;
        distance += dashWidth;
        final end = pathMetric.getTangentForOffset(distance)?.position;
        if (start != null && end != null) {
          canvas.drawLine(start, end, paint);
        }
        distance += dashSpace;
      }
    }
  }

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

2. 使用方式

CustomPaint(
  painter: DashedLinePainter(
    color: Colors.blue,
    strokeWidth: 2,
    dashWidth: 10,
    dashSpace: 5,
  ),
  size: Size(300, 1), // 宽度300，高度1的横线
)

3. 其他虚线方向

  • 垂直线：修改 path.moveTo(size.width/2, 0) 和 path.lineTo(size.width/2, size.height)
  • 自定义路径：修改 Path() 的绘制逻辑

4. 虚线边框实现

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.transparent,
    ),
  ),
  child: CustomPaint(
    painter: DashedRectPainter(), // 需要实现矩形虚线绘制逻辑
  ),
)

这种方法可以灵活控制虚线的颜色、粗细、间隔等属性，适用于各种虚线绘制场景。

回到顶部