imageFWidget 用心提供精致的组件,助您构建精美的应用。
今天,FWidget 为开发者们带来的精致组件是~FLoading。
在实际应用场景中,构建 Loading 元素似乎是每个开发者必须掌握的技能。现在,FLoading 来帮助开发者们进一步精进这以技能。
FLoading 提供了一种极简的 Loading 元素构建方式,同时为开发者提供了诸多可高度定制化的配置,让开发者可以轻松的创建出精美的 Loading。
✨ 特性
那么,来看看 FLoading 都带来了什么。
-
提供最便捷的方式,控制 Loading 的 展示/隐藏
-
支持修改背景颜色
-
支持定时自动隐藏
-
支持局部和全局自定义样式
🛸 传送区
🛸 【传送门:FLoading Github 主页】
📖 【传送门:FLoading 文档】
🌈 显示/隐藏
image
/// 显示
///
/// show
FLoading.show(context);
/// 隐藏
///
/// hide
FLoading.hide();
通过 FLoading 来实现 Loading 的 显示/隐藏 ,真是太简单了。
💎 自定义样式
imageFLoading 允许开发者自由的定义全局 Loading 样式或单次展示的 Loading 样式。
自定义全局样式
/// 定义全局 Loading 样式
///
///Define global loading style
FLoading.init(CupertinoActivityIndicator(), backgroundColor: Colors.black38);
/// 显示
///
/// show
FLoading.show(context);
在自定义全局样式后,开发者就可以便捷的通过 FLoading.show(context);
,即可在全局任意位置构建统一的 Loading 样式。
自定义单次样式
FLoading.show(context,
/// 通过 loading 配置单次样式
///
/// One-shot style configuration via loading
loading: Image.asset(
"assets/loading_gif_2.gif",
width: 100,
height: 100,
));
即使在定义全局样式后,在特殊位置,FLoading 依旧允许开发者在单次构建时,指定特殊的 Loading 样式。
🛰 定时隐藏和背景颜色
imageFLoading.show(
context,
loading: Image.asset(
"assets/loading_gif_1.gif",
width: 200,
height: 200,
),
/// 定时隐藏
///
/// Timed hiding
duration: 3000,
/// 配置背景样式
///
/// Configure background style
color: Colors.red[300].withOpacity(0.3),
)
FLoading 提供了定时自动隐藏和变更背景色的配置,以满足开发者们无限的创造力。
想要了解更多详细内容?请访问 FLoading 官方主页 (PS:别忘了投出一个你认可的 Star 哦 😘)。
😃 如何使用?
在项目 pubspec.yaml
文件中添加依赖:
🌐 pub 依赖方式
dependencies:
floading: ^<版本号>
⚠️ 注意,请到 pub 获取 FLoading 最新版本号
🖥 git 依赖方式
dependencies:
floading:
git:
url: 'git@github.com:Fliggy-Mobile/floading.git'
ref: '<分支号 或 tag>'
image⚠️ 注意,分支号 或 tag 请以 FLoading 官方项目为准。
网友评论