Flutter自定义虚线绘制插件fdottedline_nullsafety的使用

简介

fdottedline 是一个用于在Flutter中轻松创建虚线视图的插件。它不仅支持创建水平和垂直方向的虚线，还支持为Widget添加虚线边框，并且可以灵活控制虚线的粗细、间距以及圆角效果。

作者

• Newton (coorchice.cb@alibaba-inc.com)

特性

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

参数与接口

示例代码

1. 水平虚线示例

FDottedLine(
  color: Colors.red,  // 设置虚线颜色为红色
  width: 160.0,       // 设置宽度为160.0
  strokeWidth: 2.0,   // 设置虚线的粗细为2.0
  dottedLength: 10.0, // 设置每个小段的长度为10.0
  space: 2.0,         // 设置每个段之间的间距为2.0
)

2. 垂直虚线示例

FDottedLine(
  color: Colors.blue, // 设置虚线颜色为蓝色
  height: 160.0,      // 设置高度为160.0
  strokeWidth: 2.0,   // 设置虚线的粗细为2.0
  dottedLength: 10.0, // 设置每个小段的长度为10.0
  space: 2.0,         // 设置每个段之间的间距为2.0
)

3. 虚线矩形示例

FDottedLine(
  color: Colors.lightBlue[600], // 设置虚线颜色为浅蓝色
  height: 100.0,                // 设置高度为100.0
  width: 50,                    // 设置宽度为50.0
  strokeWidth: 2.0,             // 设置虚线的粗细为2.0
  dottedLength: 10.0,           // 设置每个小段的长度为10.0
  space: 2.0,                   // 设置每个段之间的间距为2.0
)

4. 圆角虚线矩形示例

FDottedLine(
  color: Colors.lightBlue[600], // 设置虚线颜色为浅蓝色
  height: 70.0,                 // 设置高度为70.0
  width: 70.0,                  // 设置宽度为70.0
  strokeWidth: 2.0,             // 设置虚线的粗细为2.0
  dottedLength: 10.0,           // 设置每个小段的长度为10.0
  space: 2.0,                   // 设置每个段之间的间距为2.0
  corner: FDottedLineCorner.all(50), // 设置所有角的圆角半径为50
)

5. 为Widget添加虚线边框示例

FDottedLine(
  color: Colors.red,            // 设置虚线颜色为红色
  strokeWidth: 2.0,             // 设置虚线的粗细为2.0
  dottedLength: 8.0,            // 设置每个小段的长度为8.0
  space: 3.0,                   // 设置每个段之间的间距为3.0
  corner: FDottedLineCorner.all(6.0), // 设置所有角的圆角半径为6.0
  child: Container(
    color: Colors.blue[100],    // 设置容器背景颜色为浅蓝色
    width: 130,                 // 设置容器宽度为130
    height: 70,                // 设置容器高度为70
    alignment: Alignment.center, // 设置内容居中
    child: Text("0873"),        // 显示文本"0873"
  ),
)

6. 嵌套虚线边框示例

FDottedLine(
  color: Colors.red,            // 设置外层虚线颜色为红色
  strokeWidth: 2.0,             // 设置外层虚线的粗细为2.0
  dottedLength: 8.0,            // 设置外层虚线每个小段的长度为8.0
  space: 3.0,                   // 设置外层虚线每个段之间的间距为3.0
  corner: FDottedLineCorner.all(75.0), // 设置外层虚线所有角的圆角半径为75.0
  child: Container(
    width: 130,                 // 设置容器宽度为130
    height: 130,               // 设置容器高度为130
    alignment: Alignment.center, // 设置内容居中
    child: FDottedLine(
      color: Colors.blue,       // 设置内层虚线颜色为蓝色
      strokeWidth: 2.0,         // 设置内层虚线的粗细为2.0
      dottedLength: 8.0,        // 设置内层虚线每个小段的长度为8.0
      space: 3.0,               // 设置内层虚线每个段之间的间距为3.0
      corner: FDottedLineCorner.all(20.0), // 设置内层虚线所有角的圆角半径为20.0
      child: Container(
        width: 43.0,            // 设置内层容器宽度为43.0
        height: 43.0,           // 设置内层容器高度为43.0
        color: Colors.grey[900], // 设置内层容器背景颜色为深灰色
      ),
    ),
  ),
)

如何使用

1. 添加依赖

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

使用Pub依赖

dependencies:
  fdottedline: ^<version number>

注意：请前往 pub 获取最新版本号。

使用Git依赖

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

注意：请参考 FDottedLine 官方项目获取分支号或标签号。

2. 运行示例项目

1. 克隆 项目到本地
2. 进入项目example目录并运行以下命令：

   flutter create .
   

3. 在example目录中运行示例项目。

许可证

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.