FWidget 用心提供精致的組件，助您構(gòu)建精美的應(yīng)用。
現(xiàn)在，開發(fā)者請集中注意力 ??。
思考一下 ??，如何才能構(gòu)建出下圖中的視效呢？
經(jīng)過大腦 ?? 的一番飛速旋轉(zhuǎn)，也許我們最終會發(fā)現(xiàn)這其中有詐 ?? ！嗯～這不是一個容易的事情啊。
在下拉的過程中，隨著滑動距離的變化，我們需要連續(xù)處理幾個不同階段的情況：
臨界距離之前的下拉過程
到達(dá)臨界距離
超過臨界距離的下拉過程
自由回彈到刷新位置
保持刷新狀態(tài)
刷新結(jié)束，自由回彈到 0 點位置
-
未達(dá)臨界距離回彈到 0 點位置
. . .
每一個過程都需要我們進行大量的計算和邏輯判斷。如果再想隨著滑動距離對頭部 Widget 作出相應(yīng)調(diào)整，那事情就真是很復(fù)雜了。
很焦慮嗎？
開發(fā)者，大可不必！
因為， FRefresh 出現(xiàn)啦！
FRefresh 是由 【阿里巴巴-飛豬-FliggyMobile 技術(shù)團隊】 開發(fā)維護的 FWidget 系列組件之一。
在過去一段時間中，我們已經(jīng)先后向社區(qū)開放了 5 實用精美的 Widget （ FSuper 、 FButton 、 FSwitch 、 FRadio 、 FFloat ），幫助開發(fā)者們更易構(gòu)建出賞心悅目的應(yīng)用。
我們很高興獲得了開發(fā)者們給予的認(rèn)同和支持，目前我們已經(jīng)累計收到了開發(fā)者們投出的 440 個 Star 。
而今天給開發(fā)者們獻(xiàn)上的 FRefresh ，正是 FWidget 系列組件中的第 6 個成員。
 image
|
 image
|
 image
|
 image
|
 image
|
 image
|
? 特性
來看看 FRefresh 都為開發(fā)者們準(zhǔn)備了些什么：
提供超簡單的下拉刷新和上拉加載構(gòu)建方式
支持局部更新刷新區(qū)域和加載區(qū)域視圖
足夠全面的狀態(tài)機支持
實用的控制器
支持主動觸發(fā)刷新
?? 傳送區(qū)
?? 【傳送門：FRefresh Github 主頁 - 感謝您的 Star ??】
?? 【傳送門：FRefresh 文檔】
?? 基礎(chǔ)版下拉刷新
就要更簡單。
這是日常開發(fā)中我們最常見的下拉刷新例子 ??。相信我，如果自己想要構(gòu)建一個這樣的效果，會很費勁的！
但如果使用 FRefresh ，情況就完全不同了。
接下來，我們只需要通過簡單的幾行代碼，就能完成這一效果的構(gòu)建。
FRefresh(
/// 構(gòu)建刷新 Header
header: buildRefreshView(),
/// 需要傳入 Header 區(qū)域大小
headerHeight: 75.0,
/// 內(nèi)容區(qū)域 Widget
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
...
),
/// 進入 Refreshing 后會回調(diào)該函數(shù)
onRefresh: () {},
);
完工 ??！
這就是創(chuàng)建下拉刷新所要做的所有工作。
FRefresh 處理好了一切，開發(fā)者只需要全身心關(guān)注 Header 區(qū)域 和 內(nèi)容區(qū)域 的構(gòu)建工作就夠了。
?? 進階版下拉刷新
足夠簡單，足夠高效
FRefresh(
/// 通過 headerBuilder 構(gòu)建 Header 區(qū)域
headerBuilder: (setter, constraints) {
return FSuper(
/// 獲取當(dāng)前 Header 區(qū)域可用空間大小
width: constraints.maxWidth,
height: constraints.maxHeight,
...
onClick:{
setter((){
/// 刷新 Header 區(qū)域
})
},
);
},
headerHeight: 100.0,
/// 構(gòu)建內(nèi)容區(qū)域
child: GridView.builder(),
/// 進入 Refreshing 狀態(tài)后會回調(diào)該函數(shù)
onRefresh: () {}
)
FRefresh 提供了一種十分靈活的 Header 區(qū)域構(gòu)建方式，即通過 HeaderBuilder 函數(shù)完成構(gòu)建。
在 HeaderBuilder 函數(shù)中，開發(fā)者能夠通過參數(shù)獲取到用于局部刷新 Header 區(qū)域的刷新函數(shù) StateSetter ，以及 Header 區(qū)域 的實時大小。
這種方式，賦予了 Header 區(qū)域 更加開放的創(chuàng)造性。
?? 基礎(chǔ)版上拉加載
兩種模式，一種風(fēng)格
與下拉刷新對應(yīng)，上拉加載效果的構(gòu)建也同樣非比尋常的簡單。
FRefresh(
/// 構(gòu)建 Footer 區(qū)域
footer: LinearProgressIndicator(),
/// 需要配置 Footer 區(qū)域高度
footerHeight: 20.0,
/// 構(gòu)建內(nèi)容區(qū)域
child: builderContent(),
/// 進入 Loading 狀態(tài)后會回調(diào)該函數(shù)
onLoad: () { },
)
構(gòu)建上拉加載也一樣足夠簡單。開發(fā)者只需要關(guān)注 Footer 區(qū)域 和 內(nèi)容區(qū)域 的構(gòu)建，上拉加載過程中的狀態(tài)變更、視效控制等就放心交給 FRefresh 好了。
?? 進階版上拉加載
不停止追求美的腳步
FRefresh(
/// 通過 FooterBuilder 構(gòu)建 Footer 區(qū)域 Widget
footerBuilder: (setter) {
/// 獲取刷新狀態(tài)，局部更新 Footer 區(qū)域內(nèi)容
controller.setOnStateChangedCallback((state) {
setter(() {
...
});
});
return buildFooter();
},
footerHeight: 38.0,
child: buildContent(),
onLoad: () {
controller.finishLoad();
},
)
FRefresh 也為 Footer 區(qū)域 的構(gòu)建提供了一個構(gòu)建函數(shù) FooterBuilder 。通過該函數(shù)可以獲取到只局部刷新 Footer 區(qū)域 的刷新函數(shù) StateSetter 。
這樣開發(fā)者就能很方便的根據(jù)狀態(tài)或是其它一些條件改變 Footer 區(qū)域 的視圖了。
很貼心的吧 ??。
?? FRefreshController
讓你掌控全局
FRefresh 向開發(fā)者提供了貼心的控制器 FRefreshController ，支持諸多便捷的能力。
1. 給 FRefresh 添加控制器
/// 創(chuàng)建 控制器
FRefreshController controller = FRefreshController()
/// 給 FRefresh 配置控制器
FRefresh(
controller: controller,
)
當(dāng)開發(fā)者創(chuàng)建一個控制器，然后將它設(shè)置到一個 FRefresh 中后，控制器就能開始監(jiān)聽這個 FRefresh 的狀態(tài)，以及對它進行控制了。
2. 停止刷新或加載
當(dāng)觸發(fā)刷新狀態(tài)或加載狀態(tài)后，通常會進行網(wǎng)絡(luò)請求等數(shù)據(jù)處理任務(wù)，在這些任務(wù)結(jié)束后，我們需要停止刷新狀態(tài)或加載狀態(tài)。怎么辦呢？
controller.finishRefresh()可以停止刷新controller.finishLoad()可以停止加載
3. 監(jiān)聽狀態(tài)
controller5.setOnStateChangedCallback((state) {
/// 刷新狀態(tài)
if (state is RefreshState) {
}
/// 加載狀態(tài)
if (state is LoadState) {
}
});
通過上面這段簡單的代碼，就能實現(xiàn)對 FRefresh 狀態(tài)變化的監(jiān)聽，不論是下拉刷新，還是上拉加載。
4. 滑動監(jiān)聽
controller.setOnScrollListener((metrics) {
/// 獲取滑動信息
});
FRefreshController 添加滑動監(jiān)聽真的是很方便了。接收的參數(shù)是 [ScrollMetrics]，通過它能獲取到諸如 當(dāng)前滑動距離 、 最大滑動距離 、 是否超出滑動范圍 等非常全面的信息。
5. 主動觸發(fā)刷新
通過 FRefreshController，開發(fā)者還能主動觸發(fā)一次刷新，而且可以指定滑動到觸發(fā)刷新位置的時長。
controller.refresh(duration: Duration(milliseconds: 2000));
這項功能在很多場景中都大有用處。
想要了解更多詳細(xì)內(nèi)容？請訪問 FRefresh 官方主頁 (PS：別忘了投出一個你認(rèn)可的 Star 哦 ??)。
?? 如何使用？
在項目 pubspec.yaml 文件中添加依賴：
?? pub 依賴方式
dependencies:
frefresh: ^<版本號>
?? 注意，請到 pub 獲取 FRefresh 最新版本號
?? git 依賴方式
dependencies:
frefresh:
git:
url: 'git@github.com:Fliggy-Mobile/frefresh.git'
ref: '<分支號 或 tag>'
?? 注意，分支號 或 tag 請以 FRefresh 官方項目為準(zhǔn)。
