玩兒轉下拉刷新，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]](https://api.flutter.dev/flutt...，經過它能獲取到諸如 當前滑動距離 、 最大滑動距離 、 是否超出滑動範圍 等很是全面的信息。

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》- 知足你對浮動元素的一切想象