dev_prokit 之组件之间间隙快速填充

往期优选推荐

1. Fam 最简单的 Flutter 项目 Assets 管理脚本服务

推荐指数: ⭐️⭐️⭐️⭐️⭐️

》fam 和 flutter_gen 相比优点《

fam 不需要在项目的 pubspec.yaml 文件的 dev_dependencies 引入任何东西；而 flutter_gen 需要引入 flutter_gen_runner。
fam 在导入资源后只需要执行 fam run 即可；而 flutter_gen 需要执行 dart run build_runner build 。需要注意的是 dart run build_runner build 是很多代码自动生成的运行指令（多语言、json解析、rividerpod...等）。所以一旦执行就需要很长时间才能完成，而 fam 拥有独立的体系，便捷快速！
fam 的资源管理类在项目中使用简短；而 flutter_gen 需要使用.语法一直到资源文件，然后再通过 .path 获取资源路径，这很麻烦！
fam 拥有独立的系统体系； flutter_gen 和多语言的使用有一定的冲突。

2. dev_prokit 全部功能目录

推荐指数: ⭐️⭐️⭐️⭐️⭐️

该篇文章包含了 dev_prokit 所有功能介绍和示例的目录。此文章能够让开发者快速的了解 dev_prokit 都提供了那些功能，以及能更快速的找到自己需要的功能介绍和应用。

本期功能介绍

一、起因

在 flutter 项目开发中，开发者常常从设计图上获取到一个组件到另一个组件的间隙大小，然后在项目中以代码的形式进行设置来完成视图。一些开发者常使用 Padding 或者 SizeBox 来进行处理这个间隙，而这两种方法编写代码量上也相对较多；在代码的结构上有点冗余；在代码理解上不够清晰。dev_prokit 提供了 vGap 、hGap 、vSGap 、hSGap 四个方法来帮助开发者快速完成组件之间间隙的填充。

二、功能介绍

dev_prokit 提供了 vGap 、hGap 、vSGap 、hSGap 四个方法。下面以组件类型进行划分和介绍。如下：

Widget 组件

其中 vGap 和 hGap 是使用在 flutter 普通组件之间的间隙填充。
- vGap 是垂直方向进行组件之间间隙填充
- hGap 是水平方向进行组件之间间隙填充
Sliver 组件

其中 vSGap 和 hSGap 是使用在 flutter Sliver 组件之间的间隙填充。
- vSGap 是垂直方向进行Sliver组件之间间隙填充
- hSGap 是水平方向进行Sliver组件之间间隙填充
  
  注意 : 提前预置，目前还未发现水平排列的 Sliver 组件

这些方法都是对 num 进行扩展，所以它们的使用也是非常简单，例如: 1.vGap 、 2.5.hGap、 3.vSGap、 4.23.hSGap 。

三、小试牛刀

下面我们将使用 dev_prokit 提供了 vGap 、hGap 、vSGap 、hSGap 四个方法来测试使用性。

Widget 组件

代码示例:

dart 复制代码

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    const Text('水平方向间隙填充'),
    Row(
      children: [
        Container(
          height: 40,
          width: 40,
          color: Colors.red,
        ),
        20.hGap,
        Container(
          height: 40,
          width: 40,
          color: Colors.green,
        ),
      ],
    ),
    const Text('垂直方向间隙填充'),
    Column(
      children: [
        Container(
          height: 40,
          width: 40,
          color: Colors.red,
        ),
        20.vGap,
        Container(
          height: 40,
          width: 40,
          color: Colors.green,
        ),
      ],
    )
  ],
)

效果展示：

Sliver 组件

代码示例:

dart 复制代码

CustomScrollView(
  slivers: [
    const SliverToBoxAdapter(
      child: Text('水平方向间隙填充'),
    ),
    10.vSGap,
    SliverToBoxAdapter(
      child: Container(
        height: 40,
        width: 40,
        color: Colors.red,
      ),
    ),
    20.vSGap,
    SliverList(
        delegate: SliverChildListDelegate([
      Container(
        height: 40,
        width: 40,
        color: Colors.green,
      )
    ]))
  ],
).insetsSymmetric(horizontal: 12),

效果展示:

上面就是 dev_prokit 提供的方法测试，代码编写上非常简单、阅读时也清晰明了。

四、鼓励与支持

这便是 dev_prokit 提供的方法之一。以编写代码较少、功能完善、代码运行强壮、支持面广等形式来开发 dev_prokit 包。如果你有 Idea 或者 Opinion ，那请你点击此处》》Idea & Opinion《《把它留下吧！如果你在使用该功能后感觉还可以，它能够给你的项目开发带来便捷，那请你为之点个⭐️ dev_prokit ⭐️ 吧！分享给更多需要它的开发者。