FWidget 用心供给精致的组件，助您构建精巧的使用。
现在，开发者，请集中留意力 。
思考一下 ，怎么才干构建出下图中的视效呢？
经过大脑 的一番飞速旋转，或许咱们终究会发现这其中有诈 ！嗯～这不是一个简略的作业啊。
在下拉的进程中，随着滑动间隔的变化，咱们需求接连处理几个不n ! ; ! |同阶段的状况：
-
临界间隔之前的下拉进程
-
抵达临界间隔
-
超过临界间隔的下拉进程
-
自由回弹到改写方位
-
保持改写状况
-
改写完毕，自由回弹到 0 点方位
-
未达临界间隔回弹到 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 个成员。
 |
 |
 |
 |
 |
 |
✨ 特性
来看看 FR7 U 1 ) Q l C { Vev 3 7freshQ ] g * s e ; G 都为开发者们预备了些什么：
-
供给超简略的下拉改写和上拉加载构建方法
-
支撑* % @ e h J S !部分更新改写区域和加载区域视图
-
满意全面的状况机支撑
-
实用的操控器
-
支撑自动触发m ) ? – ` 5 w改写
传送区
【传送门：FRefresh Github 主页 – 感谢您的 Star 】
【传送门：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(
/// 经过 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(
/// 构建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(
/// 经过 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 向开发者供给了交心的操控器 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 ; @项目为准。
感觉还不错？请到 《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 {的全部想象
