flutter如何绘制虚线边框

在Flutter中如何实现虚线边框的效果？我尝试使用Container的decoration属性设置边框，但只能实现实线边框。有没有现成的组件或简单的方法可以绘制虚线边框？需要支持自定义虚线的间隔和线段长度。

2 回复

Flutter中绘制虚线边框可使用flutter_custom_paint包或CustomPaint组件。通过CustomPainter的paint方法，用drawLine循环绘制短线段，设置dashWidth和dashSpace控制虚线样式。

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


在Flutter中绘制虚线边框可以通过以下两种方式实现：

方法一：使用dash_path插件（推荐）

  1. 首先在 pubspec.yaml 中添加依赖：
dependencies:
  dash_path: ^1.0.1
  1. 在代码中使用：
import 'package:dash_path/dash_path.dart';
import 'package:flutter/material.dart';

class DashedBorderContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: DashedBorderPainter(),
      child: Container(
        width: 200,
        height: 100,
        child: Center(child: Text('虚线边框')),
      ),
    );
  }
}

class DashedBorderPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 2
      ..style = PaintingStyle.stroke;

    final path = Path()
      ..addRect(Rect.fromLTWH(0, 0, size.width, size.height));

    // 绘制虚线：5像素实线，5像素间隔
    canvas.drawPath(dashPath(path, dashArray: CircularIntervalList([5.0, 5.0])), paint);
  }

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

方法二：使用CustomPaint手动绘制

class ManualDashedBorder extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: ManualDashedPainter(),
      child: Container(
        width: 200,
        height: 100,
        padding: EdgeInsets.all(8),
        child: Center(child: Text('手动绘制虚线')),
      ),
    );
  }
}

class ManualDashedPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.red
      ..strokeWidth = 2
      ..style = PaintingStyle.stroke;

    const dashWidth = 5;
    const dashSpace = 5;
    
    // 绘制四条边的虚线
    _drawDashedLine(canvas, paint, 0, 0, size.width, 0); // 上边
    _drawDashedLine(canvas, paint, size.width, 0, size.width, size.height); // 右边
    _drawDashedLine(canvas, paint, size.width, size.height, 0, size.height); // 下边
    _drawDashedLine(canvas, paint, 0, size.height, 0, 0); // 左边
  }

  void _drawDashedLine(Canvas canvas, Paint paint, double x1, double y1, double x2, double y2) {
    const dashWidth = 5;
    const dashSpace = 5;
    
    final distance = (Offset(x1, y1) - Offset(x2, y2)).distance;
    final steps = distance ~/ (dashWidth + dashSpace);
    
    for (int i = 0; i <= steps; i++) {
      final startT = i / steps;
      final endT = (i + dashWidth / (dashWidth + dashSpace)) / steps;
      
      final start = Offset.lerp(Offset(x1, y1), Offset(x2, y2), startT)!;
      final end = Offset.lerp(Offset(x1, y1), Offset(x2, y2), endT)!;
      
      canvas.drawLine(start, end, paint);
    }
  }

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

推荐使用方法一，使用 dash_path 插件更简洁可靠。方法二适合理解原理，但代码较复杂。

回到顶部