FWidget 用心供给精致的组件，助您构建精巧的使用。

现在，开发者，请集中留意力 。

思考一下 ，怎么才干构建出下图中的视效呢？

玩儿转下拉刷新，FRefresh

经过大脑 的一番飞速旋转，或许咱们终究会发现这其中有诈 ！嗯～这不是一个简略的作业啊。

在下拉的进程中，随着滑动间隔的变化，咱们需求接连处理几个不n ! ; ! |同阶段的状况：

  1. 临界间隔之前的下拉进程

  2. 抵达临界间隔

  3. 超过临界间隔的下拉进程

  4. 自由回弹到改写方位

  5. 保持改写状况

  6. 改写完毕，自由回弹到 0 点方位

  7. 未达临界间隔回弹到 0 点方位

    .
    .
    .

每一个进程都需求咱们进行大量的核算和逻辑判断。假如再想随着滑7 . I动间隔对头部 Widget 作出相应调整，那作业就真是G K [很杂乱了。

很焦虑吗？

开发者，大可不必！

由于， FRefresh 呈现啦！p ] F 5 k T ( %

FRefresh 是由 【阿里巴巴-飞猪-FliggyMobile 技术团队】 开发保护的 FWidget 系列组件之一。

在曩昔一段时间中，咱们现已先后向社区敞开了 5 实用精巧的 Widget （ FSuper 、 FButton 、 FSwitch 、 FRadio 、 FFloat ），协! ? l % f r % f .助开发者们更易构建出赏心悦目的使用。

咱们很快乐获得了开发者们给予的认同和支撑，现在咱们现已累计收到了开发者们投出的 440 个 Star 。

而今日给开发者p & 0 C们献上的 FRefresh ，g T g w # – X正是 FWidget 系列组件中的第 6 个成员。

玩儿转下拉刷新，FRefresh 玩儿转下拉刷新，FRefresh 玩儿转下拉刷新，FRefresh
玩儿转下拉刷新，FRefresh 玩儿转下拉刷新，FRefresh 玩儿转下拉刷新，FRefresh

✨ 特性

来看看 FR7 U 1 ) Q l C { Vev 3 7freshQ ] g * s e ; G 都为开发者们预备了些什么：

  • 供给超简略的下拉改写和上拉加载构建方法

  • 支撑* % @ e h J S !部分更新改写区域和加载区域视图

  • 满意全面的状况机支撑

  • 实用的操控器

  • 支撑自动触发m ) ? – ` 5 w改写

玩儿转下拉刷新，FRefresh

传送区

【传送门：FRefresh Github 主页 – 感谢您的 Star 】

【传送门：FRefresh 文档】

根底版下拉改写

就要更简略。

玩儿转下拉刷新，FRefresh

这是日常开发中咱们最常见的下拉改写例子 。相信我，假如自己想要构建; R P T k Z一个R 8 h 3 +这样的作用，会很费J g , s劲的！

但假如使用 FRefresh ，状况就A j U ? K 1完全不同了。

接下来，咱们j 3 # @ M 只需求经过简略的几行代码，就能完结这一作用的构建。


FRefresh(
  /// 构建改写 Header
  header: buildRefreshView(),

  /// 需求传入] J ? O Header 区域巨细
  headerHeight: 75.0,

  /// 内容区域 Wih ? q + 8 0dget
  child: ListView.builder(
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      ...
  ),

  /// 进入 Refreshing 后会回调该函数
  onRefreV - o 2sh: () {},
);

竣工 ！

这便是创立下拉改写所x X m U – 6要做d e ~ I的全部作业。

FRefresh 处理好了全) g F部，开发者只需求全身; Y d g 0 A心重视 Header 区域 和 内容区域 的5 D i d y D D s构建作业就够了。

进阶版下拉改写

满意简略，满[ i k ` d z I N i意高效

玩儿转下拉刷新，FRefresh

FRefresh(

  /// 经过 headerBuilder 构建 Header 区域
  headerBue f S ~ 1 ` I Kilderr . W 8 V J J _:o y ? (sett= } A BerF f , * ; ~ D ` ,, constraints) {
    return FSuper(

       /// 获取当前 Header 区域可用空间巨细
       width: consG 7 f } C d ntraints.maxWidth,
       height: constraints.maxHeight,
       ...
       onClick:{
          setterE ) N +((){
             /// 改写 Header 区域
          })
       },
    );
  },
  headerHeight: 100.0,

  /// 构建内容区域
  child: GridView.builder(),

  /// 进入 Refreshv - P [ V Z v c $ing 状况后会回调该函数
  onRefresh: () {}
)

FRefresh 供给了一种十分灵活的 Header 区域构建7 P % m A方法，即经过 HeaderBuilder 函数d n k 1 x完结构建。

在 HeaderBuilder 函数中，开发者能够经过参数获w $ V | –取到用于部分改写 Header 区域的改写函数 StateSetter ，以及 Header 区域 的实时巨细Z g 8 P 9。

这种方法，赋予了 Header 区域 愈加敞开的创造性。

根底版上拉加载

两种形式，一种风格

玩儿转下拉刷新，FRefresh

与下拉改写对应，上拉加载作用的构建也同样非比寻常的简略。

FRefresh(

  /// 构建G J  Y O z l e V Footer 区域
  footer: LinearProgressIndica{ h O k ] B ` otor(),

  /// 需求装备 Footer 区域高度
  footerHeight: 20.0,

  /// 构建内容区域
  child: builderContR b 1 6 0 _ent(),

  /// 进入 Loading 状况后会回调该函数
  onLoad: () { },
)

构建上拉加载也相同满意简略。开发者只需求重视 Footer 区域 和 内容区域 的构建，上拉加载进程中的状况变更、视效操控等就放心交给 FRefresh 好了。

进阶版上拉加载

不中止寻求美的脚步N T k T U

玩儿转下拉刷新，FRefresh

FRefresh(

  /// 经过 FooterBuilder 构建 Footer 区域 Widget
  footerBuilder: (setter) {

    /// 获取改写状况，部分更新 Footer 区域内容
    controller.setOnStateChangedCallback((state) {g s | a l W Y O
      setter(() {
        ...
      });
    });
    return buildFooter();
  },
  footerHeight: 38.0,
  child: buildContent(),
  onLoad: () {
    controlle& p ~ 0 X f j vr.finishLoad();
  },
)

FRefresh 也为 Footer 区域 的) O h { Q构建供给了一个构建函数 FooterBuilder 。经过该函数能够X = h获取到只部分改写 Footer 区域 的改写函数 StateSetter 。

这样开发者就能很方便的依据状况或是其它一些条件改动 Footer 区域 的视图了。

很交心的吧 。

⚙️ FRefreshController

让你掌控全局

玩儿转下拉刷新，FRefresh

FRefresh 向开发者供给了交心的操控器 FRefreshController ，支撑许多便捷的才能。

1. 给 FRefresh 增加操控器


/// 创立 操控器
FRefreshController coF a  P pntroller =a 1 A n FRefreshController()

/// 给 FRefresh 装备操控器
FRefresh(
  controller: controllerg # ! S r d,
)

当开发者创立一个操控器，然后将它设置到一个 FRefresh 中后，操控1 s e 9 )器就能开端监听这个 FRefresh 的状况，以及对它进行操控了。

2. 中止改写或加载

当触发改写状况或加载状况后，通常会进行网络请求等数据处理使命，在这些使命完毕后，咱们需求中止改写状况或加载状况。怎么办呢？

  • controller.finishRefresh() 能够中止改写

  • controller.finishLoad() 能够中止加载

3. 监听状况g $ 3

controller5.setOnStateChangedCallback((state) {
  /// 改写状况
  ifw z J / (state is RefreshState) {
  }
  /// 加载状况
  if (state is LoadState) {
  }
});

经过上面这段简略的代码，就能完成对 FRefresh 状况变化的监听，不论是下拉改写，还是上拉加载。

4y g , ; ( 0. 滑动监听

controller.setR b ] U I u _ EOnScro% ~ , l ^ t d x $llListener((metrics) {
  /// 获取滑动信息
});

FRe] f ! e 8 N 6 } 1freshCon5 # G ( | c D {troller 增加滑动监听真的是很方便了。接纳的参数是 [ScrollMetric C ` l % * ws]，F O ( 7经过它能– v n Q + t获取到诸如 当前滑动间隔 、 最大滑动间隔 、 是否超出滑动范围 等十分全面的信息。

5. 自动触发改写

经过 FRefreshController，开发者还能自动触发一次改写，而且能够指定滑动到触发改写方位的时长。


controller.refresa l o [h(duration: Duration(milliseconds: 2000));

这项功能在许多场景中都大有用途。

想要了解更多具体内容？请访问 FRefresh 官方主页 (PS：别忘了投出一个你^ 1 6 7 | [认可的 Star 哦 )。m L t T x (

怎么使用？

在项目 pu? * t p 1 2 G nbspec.ya* Q q s A q 3ml 文件中增加依靠：

pub 依靠方法

dependencies:
frefresh: ^<版本号>

⚠️ 留意，请到 pub 获取 FRefresh 最新版本号

git 依靠方法

dependencx ; lies:
frefresh:
git:
url: 'git@github.cI j Yom:Fliggy-Mobile/frefresh.git'
ref: '<分支号 或 tag>. ^ @ E ` # 8;'

⚠️ 留意g W E b，分支号 或 tag 请以 FRefresh 官方1 e G u ; @项目为准。

玩儿转下拉刷新，FRefresh

感觉还不错？请到 《FRefresE n ; c 2 !h》的 Github 主页投^ o O M c出您认可的一个 Star 吧！

往期组件

  • 《FSuper》- 协助开发者快速构建精巧的杂乱视图

  • 《FButton》- 为开, [ 9 # & a发者预备了许多美妙的装备项

  • 《FSx T w W B .witch》- 具有优秀交互和视效的精巧开关元素

  • 《FRadio》- 一M C x p – t个适用于几乎任意单选场景的单选组件

  • 《FFloae M # ( U A 4 6t》- 满意你对浮动元素– { * R T {的全部想象