Flutter绘制虚线插件dashed_line的使用

dashed_line #

pub.dev 构建状态

使用任何形状和样式绘制虚线。就像这样。

用法 #

在pubspec.yaml文件中添加依赖项（你可以从pub徽标看到最新版本）：

dependencies:
  dashed_line: ^0.1.0

使用该组件：

import 'package:dashed_line/dashed_line.dart';

// ...

DashedLine(
  path: Path()..cubicTo(-40, 53, 14, 86, 61, 102),
  color: Colors.red,
)

你也可以使用SVG路径命令代替Path：

DashedLine.svgPath(
  'C -40 53 14 86 61 102',
  color: Colors.red,
)

获取路径方法/命令的地方 #

有许多方法可以获取路径。

你可以使用Path类的方法自己构造路径，例如lineTo或cubicTo。

你还可以使用SVG文件中d属性使用的路径命令。你可以手动输入这些命令，或者通过向量图形软件导出，如Inkscape或Figma。我们发现SvgPathEditor非常有用。

示例：从Figma导出路径命令

第一步	第二步

现在我们在剪贴板中有了一个SVG：

<svg width="190" height="48" viewBox="0 0 190 48" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M1 16C73 79 100 3 121 0.999997C142 -1 214.5 11.5 179 47" stroke="black"/>
</svg>

从这里我们可以复制path的d属性值，并用于DashedLine.svgPath构造函数的第一个参数。

🚨 关于路径的注意事项 #

由于Path在Flutter和Skia中的工作方式，DashedLine组件占用的空间不是虚线实际需要的空间，而是包含所有控制点所需的空间。下表有助于理解这个问题。

路径命令	路径	结果线
`C 8 63 14 86 61 102`
`C -40 53 14 86 61 102`

许可证 #

查看LICENSE。

完整示例代码

import 'package:dashed_line/dashed_line.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: HomeScreen()));

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    final path = Path()..cubicTo(-40, 53, 14, 86, 61, 102);

    return Scaffold(
      appBar: AppBar(
        title: const Text('dashed_line 示例'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.celebration),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          const Spacer(),
          Text(
            '点击我！',
            textAlign: TextAlign.center,
            style: Theme.of(context).textTheme.headline4,
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.fromLTRB(72, 0, 72, 64),
              child: DashedLine(
                path: path,
                color: Theme.of(context).textTheme.headline4!.color!,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter绘制虚线插件dashed_line的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼

更多关于Flutter绘制虚线插件dashed_line的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter中使用dashed_line插件来绘制虚线的示例代码。dashed_line插件允许你轻松地在Flutter应用中绘制虚线。

首先，你需要在你的pubspec.yaml文件中添加dashed_line依赖：

dependencies:
  flutter:
    sdk: flutter
  dashed_line: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来是一个完整的示例代码，展示如何使用dashed_line插件绘制虚线：

import 'package:flutter/material.dart';
import 'package:dashed_line/dashed_line.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dashed Line Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DashedLineScreen(),
    );
  }
}

class DashedLineScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dashed Line Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 绘制水平虚线
            DashedLine(
              axis: Axis.horizontal,
              lineLength: 20.0,
              lineSpacing: 10.0,
              strokeWidth: 2.0,
              color: Colors.black,
            ),
            SizedBox(height: 20),
            // 绘制垂直虚线
            DashedLine(
              axis: Axis.vertical,
              lineLength: 20.0,
              lineSpacing: 10.0,
              strokeWidth: 2.0,
              color: Colors.black,
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，并在DashedLineScreen中使用了DashedLine小部件来绘制水平和垂直虚线。

axis: 虚线的方向，可以是Axis.horizontal（水平）或Axis.vertical（垂直）。
lineLength: 每段实线的长度。
lineSpacing: 每段实线之间的间距。
strokeWidth: 虚线的粗细。
color: 虚线的颜色。

你可以根据需要调整这些参数来绘制不同样式的虚线。

希望这个示例能帮助你理解如何在Flutter中使用dashed_line插件来绘制虚线。如果有任何其他问题，请随时提问！