由你做主,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: '[email protected]:Fliggy-Mobile/floading.git'
      ref: '<分支號 或 tag>'

⚠️ 注意,分支號 或 tag 請以 FLoading 官方項目爲準。

感覺還不錯?請到 《FLoading》的 Github 主頁投出您認可的一個 Star 🌟 吧!

更多精彩組件

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章