Flutter中PaginatedDataTable是否支持自动切换页面索引？

一、核心思路 #

通过Timer定时触发页码切换，结合PaginatedDataTable的page属性和onPageChanged回调实现自动翻页；同时适配电视端遥控器焦点交互，确保操作流畅。

二、具体实现步骤 #

1. 状态管理与定时逻辑 #

在StatefulWidget的状态类中维护当前页码和定时器，实现自动翻页核心逻辑：

class AutoPaginatedTable extends StatefulWidget {
  const AutoPaginatedTable({super.key});

  @override
  State<AutoPaginatedTable> createState() => _AutoPaginatedTableState();
}

class _AutoPaginatedTableState extends State<AutoPaginatedTable> {
  int _currentPage = 0;
  Timer? _autoPageTimer;
  // 需和PaginatedDataTable的rowsPerPage保持一致
  final int _rowsPerPage = 10;
  // 模拟业务数据源
  final List<Map<String, dynamic>> _data = List.generate(50, (index) => {'id': index, 'name': '条目 $index'});

  @override
  void initState() {
    super.initState();
    // 启动自动翻页（每5秒切换一页）
    _startAutoPageTimer();
  }

  void _startAutoPageTimer() {
    _autoPageTimer?.cancel();
    _autoPageTimer = Timer.periodic(const Duration(seconds: 5), (timer) {
      setState(() {
        int totalPages = (_data.length / _rowsPerPage).ceil();
        // 循环翻页：最后一页切换回第一页
        _currentPage = (_currentPage + 1) % totalPages;
      });
    });
  }

  @override
  void dispose() {
    // 销毁定时器，避免内存泄漏
    _autoPageTimer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PaginatedDataTable(
        header: const Text('电视端自动翻页表格'),
        rowsPerPage: _rowsPerPage,
        currentPage: _currentPage,
        onPageChanged: (newPage) {
          setState(() {
            _currentPage = newPage;
            // 用户手动切换页码后重启定时器（可选，按需调整）
            _startAutoPageTimer();
          });
        },
        columns: const [
          DataColumn(label: Text('ID')),
          DataColumn(label: Text('名称')),
        ],
        source: _TableDataSource(_data),
      ),
    );
  }
}

// 自定义表格数据源
class _TableDataSource extends DataTableSource {
  final List<Map<String, dynamic>> data;

  _TableDataSource(this.data);

  @override
  DataRow? getRow(int index) {
    if (index >= data.length) return null;
    final item = data[index];
    return DataRow.byIndex(
      index: index,
      cells: [
        DataCell(Text(item['id'].toString())),
        DataCell(Text(item['name'])),
      ],
    );
  }

  @override
  bool get isRowCountApproximate => false;

  @override
  int get rowCount => data.length;

  @override
  int get selectedRowCount => 0;
}

2. 电视端交互适配 #

• 焦点优化：PaginatedDataTable默认支持遥控器焦点导航，若需自定义焦点高亮，可给表格行或分页按钮绑定FocusNode，通过Focus组件调整样式。
• 遥控器按键扩展：通过RawKeyboardListener监听遥控器按键，实现暂停/恢复自动翻页等操作：

// 在build方法中包裹PaginatedDataTable
RawKeyboardListener(
  focusNode: FocusNode(),
  onKey: (event) {
    // 监听遥控器确认键，切换自动翻页状态
    if (event.isKeyPressed(LogicalKeyboardKey.select)) {
      if (_autoPageTimer?.isActive ?? false) {
        _autoPageTimer?.cancel();
      } else {
        _startAutoPageTimer();
      }
    }
  },
  child: PaginatedDataTable(/* ... */),
)

3. 业务适配注意事项 #

• 若数据为异步加载（接口请求），需确保数据加载完成后再启动定时器，避免页码计算错误。
• 根据电视屏幕尺寸调整rowsPerPage，保证内容显示完整不溢出。
• 自动翻页间隔可根据业务场景调整，避免过于频繁导致用户无法看清内容。

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