Flutter虚线绘制插件fdottedline的使用

Flutter虚线绘制插件fdottedline的使用

简介

fdottedline

使用最简单的方式创建虚线视图 👀!

[FDottedLine] 提供开发人员创建虚线的能力。它还支持为 [Widget] 创建虚线边框。支持控制虚线的厚度、间距和角。

作者：Newton(coorchice.cb@alibaba-inc.com)

English | 简体中文

喜欢吗？请给个 Star 🥰 ！

✨ 特性

  • 支持水平和垂直方向的虚线。
  • 支持创建虚线形状。
  • 提供一种非常简单的方法为 [Widget] 添加虚线边框。
  • 支持创建灵活的虚线角效果。

⚙️ 参数与接口

🔩 FDottedLine 参数

参数 类型 必填 默认值 描述
color Color 否 Colors.black 虚线颜色
height double 否 null 高度。如果只有 [height] 没有 [width]，则会得到一条垂直方向的虚线。如果有 [width] 和 [height]，则会得到一个虚线边框。
width double 否 null 宽度。如果只有 [width] 没有 [height]，则会得到一条水平方向的虚线。如果有 [width] 和 [height]，则会得到一个虚线边框。
strokeWidth double 否 1.0 虚线的厚度
dottedLength double 否 5.0 每段虚线的长度
space double 否 3.0 每段虚线之间的间距
corner FDottedLineCorner 否 null 虚线边框的角。详见 [FDottedLineCorner]
child Widget 否 null 如果设置了 [child]，[FDottedLine] 将作为 [child] 的虚线边框。此时，[width] 和 [height] 将不再有效。

📺 示例

🔩 水平虚线示例

水平虚线 
FDottedLine(
  color: color,
  width: 160.0,
  strokeWidth: 2.0,
  dottedLength: 10.0,
  space: 2.0,
)

通过设置 width 参数，可以轻松创建一条水平虚线。开发者只需要设置宽度参数即可完成操作。

如果想控制虚线的厚度，可以设置 strokeWidth。

通过 dottedLength 和 space 参数，开发者可以自由控制虚线每段的长度和它们之间的间距。

⛓ 垂直虚线示例

垂直虚线 
FDottedLine(
  color: color,
  height: 160.0,
  strokeWidth: 2.0,
  dottedLength: 10.0,
  space: 2.0,
)

如果想创建一条垂直方向的虚线，也非常简单。

开发者只需给 height 参数赋值，并将 width 设置为 null 或 0 即可。

🔹 虚线形状示例

虚线形状 
FDottedLine(
  color: Colors.lightBlue[600],
  height: 100.0,
  width: 50,
  strokeWidth: 2.0,
  dottedLength: 10.0,
  space: 2.0,
)

除了简单的虚线外，FDottedLine 还能创建虚线矩形！只需同时设置 width 和 height 即可。

🌏 角虚线示例

角虚线 
FDottedLine(
  color: Colors.lightBlue[600],
  height: 70.0,
  width: 70.0,
  strokeWidth: 2.0,
  dottedLength: 10.0,
  space: 2.0,
  
  /// 设置角
  corner: FDottedLineCorner.all(50),
)

FDottedLine 还支持创建带有圆角的虚线矩形，例如：虚线圆角矩形、虚线圆形等。

🧩 子组件示例

子组件 
FDottedLine(
  color: color,
  strokeWidth: 2.0,
  dottedLength: 8.0,
  space: 3.0,
  corner: FDottedLineCorner.all(6.0),
  
  /// 添加子组件
  child: Container(
    color: Colors.blue[100],
    width: 130,
    height: 70,
    alignment: Alignment.center,
    child: Text("0873"),
  ),
)

过去为 Widget 添加虚线边框非常困难，因为官方没有提供很好的解决方案。但现在，FDottedLine 让这一切变得简单。开发者只需将 Widget 作为 FDottedLine 的子组件即可。

🔬 更多示例

更多示例 
FDottedLine(
  color: color,
  strokeWidth: 2.0,
  dottedLength: 8.0,
  space: 3.0,
  corner: FDottedLineCorner.all(75.0),
  child: Container(
    width: 130,
    height: 130,
    alignment: Alignment.center,
    child: FDottedLine(
      color: color,
      strokeWidth: 2.0,
      dottedLength: 8.0,
      space: 3.0,
      corner: FDottedLineCorner.all(20.0),
      child: Container(
        width: 43.0,
        height: 43.0,
        color: Colors.grey[900],
      ),
    ),
  ),
)

通过 FDottedLine 的嵌套，可以创建许多有趣的视图。

😃 如何使用？

🌐 添加依赖

在项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  fdottedline: ^<version number>

注意：请前往 [pub] (https://pub.dev/packages/fdottedline) 获取最新版本号。

🖥 Git 依赖

dependencies:
  fdottedline:
    git:
      url: 'git@github.com:Fliggy-Mobile/fdottedline.git'
      ref: '<Branch number or tag number>'

注意：请参考 [FDottedLine] (https://github.com/Fliggy-Mobile/fdottedline) 官方项目获取分支号或标签号。

💡 许可证

Copyright 2020-present Fliggy Android Team <alitrip_android@list.alibaba-inc.com>.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at following link.

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

🥰 喜欢就给个 Star！

How to run Demo project?

  1. 克隆 项目到本地。

  2. 进入项目 example 目录并运行以下命令：

    flutter create .

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

1 回复

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


fdottedline 是一个用于在 Flutter 中绘制虚线的插件。它可以帮助你轻松地在 UI 中创建虚线效果，适用于各种场景，如分割线、边框等。

安装

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

dependencies:
  flutter:
    sdk: flutter
  fdottedline: ^1.0.0  # 请检查最新版本

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

使用

fdottedline 提供了 FDottedLine 组件，你可以通过它来绘制虚线。以下是一些基本用法：

1. 绘制水平虚线

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FDottedLine Example'),
      ),
      body: Center(
        child: FDottedLine(
          color: Colors.black,
          width: 200.0,
          strokeWidth: 2.0,
          dottedLength: 10.0,
          space: 5.0,
        ),
      ),
    );
  }
}

2. 绘制垂直虚线

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FDottedLine Example'),
      ),
      body: Center(
        child: FDottedLine(
          color: Colors.black,
          height: 200.0,
          strokeWidth: 2.0,
          dottedLength: 10.0,
          space: 5.0,
        ),
      ),
    );
  }
}

3. 绘制自定义形状的虚线

FDottedLine 还支持自定义形状的虚线，你可以通过 shape 参数来指定形状。

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FDottedLine Example'),
      ),
      body: Center(
        child: FDottedLine(
          color: Colors.black,
          width: 200.0,
          height: 100.0,
          strokeWidth: 2.0,
          dottedLength: 10.0,
          space: 5.0,
          shape: BoxShape.rectangle, // 可以是 BoxShape.circle 或 BoxShape.rectangle
        ),
      ),
    );
  }
}
回到顶部