Flutter中实现支持逐页API请求的分页数据表格方案咨询

当然有完美的解决方案！默认的PaginatedDataTable确实依赖全量数据才能渲染，但我们完全可以通过自定义数据源逻辑或者使用第三方分页表格组件来实现“切换页面时才从API拉取对应页数据”的需求，避免一次性加载大量数据的性能问题。

方案一：改造原生PaginatedDataTable（自定义数据源） #

PaginatedDataTable的核心是DataTableSource，我们可以自定义一个支持远程分页的数据源类，手动控制数据加载时机。

步骤拆解： #

• 1. 定义数据源类，继承DataTableSource，维护当前页数据、总数据条数、当前页码、加载状态等状态
• 2. 实现分页切换的回调逻辑，在页码变化时触发API请求
• 3. 处理加载中、空数据、请求错误等状态的UI展示

代码示例： #

首先创建自定义数据源：

class RemotePaginatedDataSource extends DataTableSource {
  final Future<List<YourDataModel>> Function(int page, int pageSize) fetchPage;
  List<YourDataModel> _currentPageData = [];
  int _totalItems = 0;
  int _currentPage = 0;
  final int _pageSize;
  bool _isLoading = false;
  String? _errorMessage;

  RemotePaginatedDataSource({
    required this.fetchPage,
    required int pageSize,
  }) : _pageSize = pageSize;

  // 初始化加载第一页
  Future<void> loadInitialPage() async {
    await _loadPage(0);
  }

  // 加载指定页码的数据
  Future<void> _loadPage(int page) async {
    if (_isLoading) return;
    _isLoading = true;
    notifyListeners();
    try {
      final data = await fetchPage(page, _pageSize);
      // 假设API返回的响应里包含总条数，这里需要根据你的实际API调整
      // 比如你可以让fetchPage返回一个包含data和total的对象
      _currentPageData = data;
      _totalItems = 100; // 替换为API返回的实际总条数
      _currentPage = page;
      _errorMessage = null;
    } catch (e) {
      _errorMessage = e.toString();
    } finally {
      _isLoading = false;
      notifyListeners();
    }
  }

  // 切换页面时调用
  Future<void> onPageChanged(int newPage) async {
    await _loadPage(newPage);
  }

  @override
  DataRow? getRow(int index) {
    if (index >= _currentPageData.length) return null;
    final item = _currentPageData[index];
    return DataRow.byIndex(
      index: index,
      cells: [
        DataCell(Text(item.id.toString())),
        DataCell(Text(item.name)),
        // 根据你的数据模型添加更多单元格
      ],
    );
  }

  @override
  int get rowCount => _isLoading ? _currentPageData.length + 1 : _currentPageData.length;

  @override
  bool get isRowCountApproximate => false;

  @override
  int get selectedRowCount => 0;

  // 获取加载状态和错误信息，用于UI展示
  bool get isLoading => _isLoading;
  String? get errorMessage => _errorMessage;
}

然后在页面中使用这个数据源：

class RemotePaginatedTable extends StatefulWidget {
  @override
  _RemotePaginatedTableState createState() => _RemotePaginatedTableState();
}

class _RemotePaginatedTableState extends State<RemotePaginatedTable> {
  final int _pageSize = 10;
  late RemotePaginatedDataSource _dataSource;

  @override
  void initState() {
    super.initState();
    _dataSource = RemotePaginatedDataSource(
      fetchPage: (page, pageSize) async {
        // 这里替换为你的API请求逻辑
        final response = await http.get(
          Uri.parse('your-api-url?page=$page&pageSize=$pageSize'),
        );
        // 解析响应为你的数据模型列表
        return YourDataModel.fromList(json.decode(response.body));
      },
      pageSize: _pageSize,
    );
    // 初始化加载第一页
    _dataSource.loadInitialPage();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 显示加载状态或错误信息
        if (_dataSource.isLoading)
          const Padding(
            padding: EdgeInsets.all(8.0),
            child: CircularProgressIndicator(),
          ),
        if (_dataSource.errorMessage != null)
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text('加载失败: ${_dataSource.errorMessage}', style: TextStyle(color: Colors.red)),
          ),
        Expanded(
          child: PaginatedDataTable(
            header: const Text('远程分页表格'),
            columns: const [
              DataColumn(label: Text('ID')),
              DataColumn(label: Text('名称')),
              // 添加更多列
            ],
            source: _dataSource,
            pageSize: _pageSize,
            onPageChanged: (newPage) async {
              await _dataSource.onPageChanged(newPage);
            },
            availableRowsPerPage: const [10, 20, 50],
          ),
        ),
      ],
    );
  }
}

方案二：使用第三方分页表格组件 #

如果不想自己写太多底层逻辑，可以选择一些原生支持远程分页的第三方组件，它们已经封装好了分页请求、加载状态、空数据处理等功能，比如：

• flutter_datatable_pagination: 轻量且专注于远程分页的表格组件
• data_table_2: 支持横向滚动和远程分页的增强型表格组件

这些组件通常只需要你传入分页请求的回调函数，就能自动处理页码变化时的数据加载，大大减少开发工作量。

关键注意事项 #

1. API设计适配: 确保你的后端API支持分页参数（比如page、pageSize），并且返回总数据条数，这样前端才能计算总页数和渲染分页控件。
2. 缓存优化: 可以对已加载过的页面数据进行缓存，避免用户来回切换页面时重复发起API请求。
3. 加载状态反馈: 一定要给用户清晰的加载反馈（比如加载指示器），避免用户以为页面无响应。
4. 错误处理: 处理网络请求失败的情况，提供重试按钮或错误提示，提升用户体验。

内容的提问来源于stack exchange，提问作者Christoforos Pantazis