阅读 1194

由你做主,FLoading

FWidget 用心提供精致的组件,助您构建精美的应用。

今天,FWidget 为开发者们带来的精致组件是~FLoading

在实际应用场景中,构建 Loading 元素似乎是每个开发者必须掌握的技能。现在,FLoading 来帮助开发者们进一步精进这以技能。

FLoading 提供了一种极简的 Loading 元素构建方式,同时为开发者提供了诸多可高度定制化的配置,让开发者可以轻松的创建出精美的 Loading

✨ 特性

那么,来看看 FLoading 都带来了什么。

  • 提供最便捷的方式,控制 Loading展示/隐藏

  • 支持修改背景颜色

  • 支持定时自动隐藏

  • 支持局部和全局自定义样式

🛸 传送区

🛸 【传送门:FLoading Github 主页】

📖 【传送门:FLoading 文档】

🌈 显示/隐藏

简单有效,一气呵成


/// 显示
///
/// show 
FLoading.show(context);


/// 隐藏
///
/// hide 
FLoading.hide();
复制代码

通过 FLoading 来实现 Loading显示/隐藏 ,真是太简单了。

💎 自定义样式

足够灵活,才能大放异彩

FLoading 允许开发者自由的定义全局 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 样式。

🛰 定时隐藏和背景颜色

从细节处,关心开发者

FLoading.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>'
复制代码

⚠️ 注意,分支号 或 tag 请以 FLoading 官方项目为准。

感觉还不错?请到 《FLoading》的 Github 主页投出您认可的一个 Star 🌟 吧!

更多精彩组件