在本节中,我们将了解 NyPullToRefresh
组件。NyPullToRefresh
用于处理 Flutter 项目中的“拉动刷新”,它本质上是一个 ListView,当用户滚动到列表底部时可以获取更多数据。对于那些拥有大数据的人来说,这是一个很好的选择,因为您将能够分页数据。
用法
@override
Widget build(BuildContext context) {
return NyPullToRefresh(
child: (context, data) {
return ListTile(title: Text(data['title']));
},
data: (int iteration) async {
return [
{"title": "Clean Room"},
{"title": "Go to the airport"},
{"title": "Buy new shoes"},
{"title": "Go shopping"},
{"title": "Find my keys"},
{"title": "Clear the garden"}
].paginate(itemsPerPage: 2, page: iteration).toList();
},
stateName: "todo_list_view",
);
}
// 或从接口服务
// 本示例使用分隔列表视图,它将在每个项目之间添加分隔线
@override
Widget build(BuildContext context) {
return NyPullToRefresh.separated(
child: (context, data) {
return ListTile(title: Text(data.title));
},
data: (int iteration) async {
// 示例:从接口返回的List<Todo>
// iteration参数可用于分页
// 用户每次刷新时,迭代次数将增加 1
return api<ApiService>((request) => request.getListOfTodos(), page: iteration);
},
separatorBuilder: (context, index) {
return Divider();
},
stateName: "todo_list_view",
);
}
当返回的数据为空数组时,它将停止分页。
参数
以下是您在使用 NyPullToRefresh
小部件之前应该了解的一些重要参数。
属性 | 类型 | 描述 |
---|---|---|
child | Widget Function(BuildContext context, dynamic data) {} | 数据可用时将显示的子小组件。 |
data | Future Function(int iteration) data | 希望列表视图使用的数据列表。 |
stateName | String? stateName | 您可以使用 来 stateName 命名状态,稍后您将需要此键来更新状态。 |
如果您想了解所有可用的参数,请访问此处的此链接。
更新状态
您可以通过引用 stateName
参数来更新 NyPullToRefresh
小组件的状态。
_updateListView() {
updateState("todo_list_view");
}
这将触发 State 重新启动并从 data
参数加载新数据。