likes
comments
collection
share

dev_prokit 值组件边缘插入

作者站长头像
站长
· 阅读数 1

往期优选推荐

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

》fam 和 flutter_gen 相比优点《

  1. fam 不需要在项目的 pubspec.yaml 文件的 dev_dependencies 引入任何东西；而 flutter_gen 需要引入 flutter_gen_runner。

  2. fam 在导入资源后只需要执行 fam run 即可；而 flutter_gen 需要执行 dart run build_runner build 。需要注意的是 dart run build_runner build 是很多代码自动生成的运行指令（多语言、json解析、rividerpod...等）。所以一旦执行就需要很长时间才能完成，而 fam 拥有独立的体系，便捷快速！

  3. fam 的资源管理类在项目中使用简短；而 flutter_gen 需要使用.语法一直到资源文件，然后再通过 .path 获取资源路径，这很麻烦！

  4. fam 拥有独立的系统体系； flutter_gen 和多语言的使用有一定的冲突。

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

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

本期功能介绍

一、起因

在Flutter开发中，子组件与父组件之间的边距通常默认为零，以追求界面的紧凑与高效。然而，随着业务需求的多样化与设计视图的丰富性，我们也经常面临边距不为零的情况。在这些场景中，我们一般会根据设计图精确测量所需的边距大小，并借助Padding属性进行设置。尽管这种方法能够实现预期效果，但编写代码的过程往往较为繁琐，且不够便捷高效。

为此，我们特别推荐使用 dev_prokit 库中的几种高效方法来实现组件边缘的灵活插入。这些方法不仅简化了代码编写过程，还提升了开发效率，使您能够更轻松地应对各种边距设置需求。通过使用 dev_prokit，您将能够更加便捷地创建出精美且符合设计要求的Flutter应用界面。

二、功能介绍

dev_prokit 提供实现组件边缘快速插入的方法如下：

方法名称适用范围功能介绍
insetsWidget 和 Sliver 组件给组件添加边距，参数为 EdgeInsets 类型
insetsAllWidget 和 Sliver 组件给组件四边添加相同边距值，参数为 double 类型
insetsOnlyWidget 和 Sliver 组件给组件某一边添加边距值，参数为 double 类型
insetsSymmetricWidget 和 Sliver 组件给组件某一方向添加边距值，参数为 double 类型
insetsLTRBWidget 和 Sliver 组件给组件左上右下添加边距值，参数为 double 类型
insetsLerpWidget 和 Sliver 组件给组件根据给定的两个边距对象以及时间进行组件边距进行线性差值设置
insetsFromViewPaddingWidget 和 Sliver 组件创建与给定视图匹配的边距
sliverInsetsSliver 和继承 Sliver 组件创建 Sliver 组件和继承Sliver组件的边距

注意事项：

  1. 上述表格的前 7 个方法适用于 flutter 中全部普通组件和以 Sliver 开头的所有 Sliver 组件，包括继承组件，
  2. 最后一个方法只适用于 Sliver组件和继承 Sliver 的组件，
  3. 但是前 7 个方法不支持不以 Sliver 开头的继承组件。例如: class PageBoxAdapter extends SliverToBoxAdapter

三、小试牛刀

下面我们使用 dev_prokit 给我们提供的方法进行组件边缘插入测试。

  • 示例代码

    ColoredBox(
color: Colors.red,
child: Column(
  children: [
    Container(
      color: Colors.white,
      child: const Text('进行组件边缘插入')
          .insetsSymmetric(horizontal: 50, vertical: 10),
    ),
    ColoredBox(
      color: Colors.black,
      child: SizedBox(
        height: 60,
        child: Container(
          color: Colors.green,
        ).insetsOnly(top: 30, right: 100),
      ),
    )
  ],
).insetsAll(20),

  • 效果展示

    dev_prokit 值组件边缘插入

四、鼓励与支持

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