面试题：Flutter中如何使用FutureBuilder实现异步加载的分页处理

使用FutureBuilder实现异步加载分页功能步骤：
- 定义分页相关变量：
  - 定义当前页码变量，例如int currentPage = 1;。
  - 定义每页数据量变量，例如int pageSize = 10;。
- 创建加载数据的Future函数：在你的数据服务类中创建一个异步函数来根据页码和每页数据量获取数据，示例代码如下：

Future<List<YourDataType>> fetchData(int page, int pageSize) async {
  // 模拟网络请求延迟
  await Future.delayed(const Duration(seconds: 1)); 
  // 这里替换为实际的从数据源（如API或本地数据库）获取数据逻辑
  // 例如返回从API获取的数据
  return List.generate(pageSize, (index) => YourDataType('Data item $index')); 
}

在界面中使用FutureBuilder：

FutureBuilder<List<YourDataType>>(
  future: fetchData(currentPage, pageSize),
  builder: (context, snapshot) {
    // 不同状态处理
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Center(child: CircularProgressIndicator());
    } else if (snapshot.hasError) {
      return Center(child: Text('Error: ${snapshot.error}'));
    } else if (snapshot.hasData) {
      List<YourDataType> data = snapshot.data!;
      return ListView.builder(
        itemCount: data.length,
        itemBuilder: (context, index) {
          YourDataType item = data[index];
          return ListTile(
            title: Text(item.toString()),
          );
        },
      );
    } else {
      return const SizedBox();
    }
  },
)

不同状态下的处理方式：
- loading状态（ConnectionState.waiting）：当Future正在执行，connectionState为ConnectionState.waiting时，通常显示一个加载指示器，如上述代码中使用CircularProgressIndicator来告知用户数据正在加载。
- success状态（snapshot.hasData）：当Future成功完成并返回数据，即hasData为true时，从snapshot.data中获取数据，并将数据展示在界面上，如上述代码中使用ListView.builder来展示数据列表。
- error状态（snapshot.hasError）：当Future执行过程中发生错误，即hasError为true时，在界面上显示错误信息，如上述代码中使用Text组件显示错误文本snapshot.error，以便用户了解发生了什么问题。

面试题：Flutter中如何使用FutureBuilder实现异步加载的分页处理

知识考点

面试题答案