玩兒轉下拉刷新，FRefresh

FWidget 用心提供精緻的組件，助您構建精美的應用。

如今，開發者，請集中注意力 🤭。

思考一下 🤔，如何才能構建出下圖中的視效呢？

通過大腦 🧠 的一番飛速旋轉，也許咱們最終會發現這其中有詐 😧 ！嗯～這不是一個容易的事情啊。

在下拉的過程當中，隨着滑動距離的變化，咱們須要連續處理幾個不一樣階段的狀況：

1. 臨界距離以前的下拉過程

2. 到達臨界距離

3. 超過臨界距離的下拉過程

4. 自由回彈到刷新位置

5. 保持刷新狀態

6. 刷新結束，自由回彈到 0 點位置

7. 未達臨界距離回彈到 0 點位置

   . . .

每個過程都須要咱們進行大量的計算和邏輯判斷。若是再想隨着滑動距離對頭部 Widget 做出相應調整，那事情就真是很複雜了。

很焦慮嗎？

開發者，大可沒必要！

由於， FRefresh 出現啦！

FRefresh 是由 【阿里巴巴-飛豬-FliggyMobile 技術團隊】 開發維護的 FWidget 系列組件之一。

在過去一段時間中，咱們已經前後向社區開放了 5 實用精美的 Widget （ FSuper 、 FButton 、 FSwitch 、 FRadio 、 FFloat ），幫助開發者們更易構建出賞心悅目的應用。

咱們很高興得到了開發者們給予的認同和支持，目前咱們已經累計收到了開發者們投出的 440 個 Star 。

而今天給開發者們獻上的 FRefresh ，正是 FWidget 系列組件中的第 6 個成員。

✨ 特性

來看看 FRefresh 都爲開發者們準備了些什麼：

• 提供超簡單的下拉刷新和上拉加載構建方式

• 支持局部更新刷新區域和加載區域視圖

• 足夠全面的狀態機支持

• 實用的控制器

• 支持主動觸發刷新

🛸 傳送區

🛸 【傳送門：FRefresh Github 主頁 - 感謝您的 Star 🌟】

📖 【傳送門：FRefresh 文檔】

💫 基礎版下拉刷新

就要更簡單。

這是平常開發中咱們最多見的下拉刷新例子 🌰。相信我，若是本身想要構建一個這樣的效果，會很費勁的！

但若是使用 FRefresh ，狀況就徹底不一樣了。

接下來，咱們只須要經過簡單的幾行代碼，就能完成這一效果的構建。

FRefresh(  /// 構建刷新 Header  header: buildRefreshView(),   /// 須要傳入 Header 區域大小  headerHeight: 75.0,   /// 內容區域 Widget  child: ListView.builder(  physics: NeverScrollableScrollPhysics(),  shrinkWrap: true,  ...  ),   /// 進入 Refreshing 後會回調該函數  onRefresh: () {}, ); 複製代碼

完工 🔨！

這就是建立下拉刷新所要作的全部工做。

FRefresh 處理好了一切，開發者只須要全身心關注 Header 區域 和 內容區域 的構建工做就夠了。

🚀 進階版下拉刷新

足夠簡單，足夠高效

FRefresh(   /// 經過 headerBuilder 構建 Header 區域  headerBuilder: (setter, constraints) {  return FSuper(   /// 獲取當前 Header 區域可用空間大小  width: constraints.maxWidth,  height: constraints.maxHeight,  ...  onClick:{  setter((){  /// 刷新 Header 區域  })  },  );  },  headerHeight: 100.0,   /// 構建內容區域  child: GridView.builder(),   /// 進入 Refreshing 狀態後會回調該函數  onRefresh: () {} ) 複製代碼

FRefresh 提供了一種十分靈活的 Header 區域構建方式，即經過 HeaderBuilder 函數完成構建。

在 HeaderBuilder 函數中，開發者可以經過參數獲取到用於局部刷新 Header 區域的刷新函數 StateSetter ，以及 Header 區域 的實時大小。

這種方式，賦予了 Header 區域 更加開放的創造性。

💫 基礎版上拉加載

兩種模式，一種風格

與下拉刷新對應，上拉加載效果的構建也一樣非比尋常的簡單。

FRefresh(
  /// 構建 Footer 區域  footer: LinearProgressIndicator(),   /// 須要配置 Footer 區域高度  footerHeight: 20.0,   /// 構建內容區域  child: builderContent(),   /// 進入 Loading 狀態後會回調該函數  onLoad: () { }, ) 複製代碼

構建上拉加載也同樣足夠簡單。開發者只須要關注 Footer 區域 和 內容區域 的構建，上拉加載過程當中的狀態變動、視效控制等就放心交給 FRefresh 好了。

🚀 進階版上拉加載

不中止追求美的腳步

FRefresh(   /// 經過 FooterBuilder 構建 Footer 區域 Widget  footerBuilder: (setter) {   /// 獲取刷新狀態，局部更新 Footer 區域內容  controller.setOnStateChangedCallback((state) {  setter(() {  ...  });  });  return buildFooter();  },  footerHeight: 38.0,  child: buildContent(),  onLoad: () {  controller.finishLoad();  }, ) 複製代碼

FRefresh 也爲 Footer 區域 的構建提供了一個構建函數 FooterBuilder 。經過該函數能夠獲取到只局部刷新 Footer 區域 的刷新函數 StateSetter 。

這樣開發者就能很方便的根據狀態或是其它一些條件改變 Footer 區域 的視圖了。

很貼心的吧 🥰。

⚙️ FRefreshController

讓你掌控全局

FRefresh 向開發者提供了貼心的控制器 FRefreshController ，支持諸多便捷的能力。

1. 給 FRefresh 添加控制器

/// 建立 控制器 FRefreshController controller = FRefreshController()  /// 給 FRefresh 配置控制器 FRefresh(  controller: controller, ) 複製代碼

當開發者建立一個控制器，而後將它設置到一個 FRefresh 中後，控制器就能開始監聽這個 FRefresh 的狀態，以及對它進行控制了。

2. 中止刷新或加載

當觸發刷新狀態或加載狀態後，一般會進行網絡請求等數據處理任務，在這些任務結束後，咱們須要中止刷新狀態或加載狀態。怎麼辦呢？

• controller.finishRefresh() 能夠中止刷新

• controller.finishLoad() 能夠中止加載

3. 監聽狀態

controller5.setOnStateChangedCallback((state) {
 /// 刷新狀態  if (state is RefreshState) {  }  /// 加載狀態  if (state is LoadState) {  } }); 複製代碼

經過上面這段簡單的代碼，就能實現對 FRefresh 狀態變化的監聽，不管是下拉刷新，仍是上拉加載。

4. 滑動監聽

controller.setOnScrollListener((metrics) {
 /// 獲取滑動信息 }); 複製代碼

FRefreshController 添加滑動監聽真的是很方便了。接收的參數是 [ScrollMetrics]，經過它能獲取到諸如 當前滑動距離 、 最大滑動距離 、 是否超出滑動範圍 等很是全面的信息。

5. 主動觸發刷新

經過 FRefreshController，開發者還能主動觸發一次刷新，並且能夠指定滑動到觸發刷新位置的時長。

controller.refresh(duration: Duration(milliseconds: 2000));  複製代碼

這項功能在不少場景中都大有用處。

想要了解更多詳細內容？請訪問 FRefresh 官方主頁 (PS：別忘了投出一個你承認的 Star 哦 😘)。

😃 如何使用？

在項目 pubspec.yaml 文件中添加依賴：

🌐 pub 依賴方式

dependencies:
  frefresh: ^<版本號>
複製代碼

⚠️ 注意，請到 pub 獲取 FRefresh 最新版本號

🖥 git 依賴方式

dependencies:
  frefresh:
    git:
      url: 'git@github.com:Fliggy-Mobile/frefresh.git'
      ref: '<分支號 或 tag>'
複製代碼

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

感受還不錯？請到 《FRefresh》的 Github 主頁投出您承認的一個 Star 🌟 吧！

往期組件

• 《FSuper》- 幫助開發者快速構建精美的複雜視圖

• 《FButton》- 爲開發者準備了諸多美妙的配置項

• 《FSwitch》- 具備優良交互和視效的精美開關元素

• 《FRadio》- 一個適用於幾乎任意單選場景的單選組件

• 《FFloat》- 知足你對浮動元素的一切想象