往期优选推荐
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
属性进行设置。尽管这种方法能够实现预期效果,但编写代码的过程往往较为繁琐,且不够便捷高效。
为此,我们特别推荐使用 dev_prokit 库中的几种高效方法来实现组件边缘的灵活插入。这些方法不仅简化了代码编写过程,还提升了开发效率,使您能够更轻松地应对各种边距设置需求。通过使用 dev_prokit,您将能够更加便捷地创建出精美且符合设计要求的Flutter应用界面。
二、功能介绍
dev_prokit 提供实现组件边缘快速插入的方法如下:
方法名称 | 适用范围 | 功能介绍 |
---|---|---|
insets | Widget 和 Sliver 组件 | 给组件添加边距,参数为 EdgeInsets 类型 |
insetsAll | Widget 和 Sliver 组件 | 给组件四边添加相同边距值,参数为 double 类型 |
insetsOnly | Widget 和 Sliver 组件 | 给组件某一边添加边距值,参数为 double 类型 |
insetsSymmetric | Widget 和 Sliver 组件 | 给组件某一方向添加边距值,参数为 double 类型 |
insetsLTRB | Widget 和 Sliver 组件 | 给组件左上右下添加边距值,参数为 double 类型 |
insetsLerp | Widget 和 Sliver 组件 | 给组件根据给定的两个边距对象以及时间进行组件边距进行线性差值设置 |
insetsFromViewPadding | Widget 和 Sliver 组件 | 创建与给定视图匹配的边距 |
sliverInsets | Sliver 和继承 Sliver 组件 | 创建 Sliver 组件和继承Sliver组件的边距 |
注意事项:
- 上述表格的前 7 个方法适用于 flutter 中全部普通组件和以 Sliver 开头的所有 Sliver 组件,包括继承组件,
- 最后一个方法只适用于 Sliver组件和继承 Sliver 的组件,
- 但是前 7 个方法不支持不以 Sliver 开头的继承组件。例如:
class PageBoxAdapter extends SliverToBoxAdapter
三、小试牛刀
下面我们使用 dev_prokit 给我们提供的方法进行组件边缘插入测试。
-
示例代码
dartColoredBox( 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 包。 如果你有 Idea
或者 Opinion
,那请你点击此处 》》Idea & Opinion《《 把它留下吧!如果你在使用该功能后感觉还可以,它能够给你的项目开发带来便捷,那请你为之点个⭐️ dev_prokit ⭐️ 吧!分享给更多需要它的开发者。