PullRefresh 下拉刷新
代码演示
基本用法
dart
PullRefresh(
controller: controller,
// ignore: avoid_print
onRefresh: () => Future.sync(() => print("on refresh"))
.then((_) => Future.delayed(const Duration(seconds: 1))),
child: ListView(
controller: controller,
itemExtent: 50,
children: List.generate(100, (i) => Center(child: Text("Item $i"))),
),
),自定义头部提示
dart
PullRefresh(
controller: controller,
// ignore: avoid_print
onRefresh: () => Future.sync(() => print("on refresh"))
.then((_) => Future.delayed(const Duration(seconds: 1))),
drawHead: (args) => Image.network(
args.status == PullRefreshStatus.pull
? "https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
: "https://fastly.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg",
fit: BoxFit.fitHeight,
height: min(args.headHeight, args.visibleHeight),
),
child: ListView(
controller: controller,
itemExtent: 50,
children: List.generate(
100,
(i) => Center(child: Text("Item $i")),
),
),
),刷新期间禁用滑动
dart
PullRefresh(
controller: controller,
lockDuringRefresh: true,
// ignore: avoid_print
onRefresh: () => Future.sync(() => print("refresh"))
.then((_) => Future.delayed(const Duration(seconds: 1))),
child: ListView(
controller: controller,
itemExtent: 50,
children: List.generate(100, (index) {
return Center(child: Text("Item $index"));
}),
),
),API
| Props | 类型 | 描述 |
|---|---|---|
onRefresh | Future Function() | 释放刷新触发 |
headHeight | double | 下拉头部高度 |
drawHead | Widget Function({visibleHeight, visibleRatio, headHeight, status} args) | 自定义绘制下拉头部 |
controller | ScrollController | 关联的列表 Controller，可改善下拉判定 |
lockDuringRefresh | bool | 刷新期间禁用交互 |