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 官方項目爲準。