Flutter如何绘制虚线分割线

在Flutter中如何绘制一条虚线分割线？尝试了CustomPaint和Path，但画出来的线条始终是实线。请问有没有简单的方法或者现成的库可以实现这个效果？虚线样式需要支持自定义间隔和线宽。

2 回复

使用CustomPaint绘制虚线分割线。创建CustomPainter，在paint方法中使用drawLine循环绘制短线段，通过dashWidth和dashSpace控制虚线的间隔。

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


在Flutter中绘制虚线分割线，可以通过CustomPaint自定义绘制或使用第三方库实现。以下是两种常用方法：

方法1：使用CustomPaint自定义绘制

import 'package:flutter/material.dart';

class DashedLine extends StatelessWidget {
  final double height;
  final Color color;
  
  const DashedLine({
    super.key,
    this.height = 1,
    this.color = Colors.grey,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        final boxWidth = constraints.constrainWidth();
        const dashWidth = 5.0;
        final dashHeight = height;
        final dashCount = (boxWidth / (2 * dashWidth)).floor();
        
        return Flex(
          direction: Axis.horizontal,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: List.generate(dashCount, (_) {
            return SizedBox(
              width: dashWidth,
              height: dashHeight,
              child: DecoratedBox(
                decoration: BoxDecoration(color: color),
              ),
            );
          }),
        );
      },
    );
  }
}

// 使用示例
DashedLine(
  height: 1,
  color: Colors.grey,
)

方法2：使用dashed_line第三方库

  1. 在pubspec.yaml中添加依赖：
dependencies:
  dashed_line: ^3.0.2
  1. 代码实现：
import 'package:dashed_line/dashed_line.dart';

// 水平虚线
const DashedLine(
  direction: Axis.horizontal,
  color: Colors.grey,
  dashLength: 5,
)

// 垂直虚线
const DashedLine(
  direction: Axis.vertical,
  color: Colors.grey,
  dashLength: 5,
  height: 100, // 指定高度
)

参数说明

  • height：线的高度/粗细
  • color：虚线颜色
  • dashLength：单个虚线段的长度
  • direction：方向（水平/垂直）

推荐使用dashed_line库，它提供了更丰富的配置选项且维护良好。如果项目限制第三方库，则可采用CustomPaint方案。

回到顶部