Flutter PaginatedDataTable无法横向滚动问题求助

核心思路 #

PaginatedDataTable是整体式组件，默认无法单独指定数据行区域横向滚动。要实现需求，需拆分其结构：用SingleChildScrollView包裹数据表格实现横向滚动，同时单独构建固定的分页控件，自行管理分页状态。

修改后的完整代码示例 #

首先在你的State类中添加分页状态管理：

int _rowsPerPage = PaginatedDataTable.defaultRowsPerPage;
int _currentPage = 0;

// 计算当前页要展示的数据行
List<DataRow> _getCurrentPageRows() {
  final startIndex = _currentPage * _rowsPerPage;
  final endIndex = startIndex + _rowsPerPage;
  return rows.sublist(startIndex, endIndex.clamp(0, rows.length));
}

然后替换原SliverToBoxAdapter中的PaginatedDataTable部分：

CustomScrollView(
  scrollBehavior: MyCustomScrollBehavior(),
  slivers: [
    SliverAppBar(
      title: Text("title"),
      actions: [
        Padding(
          padding: const EdgeInsets.only(right: 16),
          child: ElevatedButton(
            onPressed: onAddNewPressed,
            child: const Row(children: [
              Text("Add new"),
              Icon(Icons.add),
            ]),
          ),
        ),
      ],
      pinned: true,
    ),
    SliverToBoxAdapter(
      child: Column(
        children: [
          // 可横向滚动的数据行区域
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: DataTable(
              columns: cols,
              rows: _getCurrentPageRows(),
            ),
          ),
          // 固定在底部的分页控件
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            alignment: Alignment.centerRight,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                const Text('Rows per page:'),
                const SizedBox(width: 8),
                DropdownButton<int>(
                  value: _rowsPerPage,
                  items: [10, 20, 50]
                      .map((count) => DropdownMenuItem(
                            value: count,
                            child: Text('$count'),
                          ))
                      .toList(),
                  onChanged: (value) {
                    setState(() {
                      _rowsPerPage = value!;
                      _currentPage = 0; // 切换每页数量后重置页码
                    });
                  },
                ),
                const SizedBox(width: 16),
                Text(
                  '${_currentPage * _rowsPerPage + 1} - '
                  '${(_currentPage + 1) * _rowsPerPage > rows.length ? rows.length : (_currentPage + 1) * _rowsPerPage} '
                  'of ${rows.length}',
                ),
                const SizedBox(width: 16),
                IconButton(
                  icon: const Icon(Icons.chevron_left),
                  onPressed: _currentPage > 0
                      ? () => setState(() => _currentPage--)
                      : null,
                ),
                IconButton(
                  icon: const Icon(Icons.chevron_right),
                  onPressed: (_currentPage + 1) * _rowsPerPage < rows.length
                      ? () => setState(() => _currentPage++)
                      : null,
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  ],
)

关键细节说明 #

• 数据行区域通过SingleChildScrollView设置Axis.horizontal实现横向滚动，解决内容溢出被隐藏的问题。
• 分页控件独立于表格区域，固定在底部，不会随横向滚动移动。
• 自行管理分页状态，确保数据展示的正确性：
  • 切换每页行数时自动重置页码，避免数据越界。
  • 通过边界判断处理最后一页数据不足的情况。
  • 根据当前页码和总数据量禁用/启用分页按钮，提升交互合理性。

内容的提问来源于stack exchange，提问作者Poula Adel