Flutter微框架Nylo(十七):NyPullToRefresh组件

95 阅读1分钟

在本节中,我们将了解 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 小部件之前应该了解的一些重要参数。

属性类型描述
childWidget Function(BuildContext context, dynamic data) {}数据可用时将显示的子小组件。
dataFuture Function(int iteration) data希望列表视图使用的数据列表。
stateNameString? stateName您可以使用 来 stateName 命名状态,稍后您将需要此键来更新状态。

如果您想了解所有可用的参数,请访问此处的此链接

更新状态

您可以通过引用 stateName 参数来更新 NyPullToRefresh 小组件的状态。

_updateListView() {
    updateState("todo_list_view");
}

这将触发 State 重新启动并从 data 参数加载新数据。