Flutter DataTable如何按索引滚动到对应DataRow.byIndex行

步骤1：定义滚动控制器和行高参数 #

在当前页面的State类中声明滚动控制器、表头高度、行高参数：

class YourPageState extends State<YourPage> {
  // 表格滚动控制器
  final ScrollController _tableScrollController = ScrollController();
  // 表头高度，和DataTable的headingRowHeight保持一致，默认56.0
  final double _headerHeight = 56.0;
  // 行高，和DataTable的dataRowHeight保持一致，默认48.0
  final double _rowHeight = 48.0;

  // 你原来的其他变量和方法
  List _jodies = [];
  int? selectedJodi;

  // ... 其他原有代码
}

步骤2：给DataTable加滚动容器 #

将你现有代码中的DataTable外层嵌套SingleChildScrollView，绑定滚动控制器：

SingleChildScrollView(
  // 绑定滚动控制器
  controller: _tableScrollController,
  // 垂直滚动方向
  scrollDirection: Axis.vertical,
  child: DataTable(
    // 如果你自定义了表头/行高，要和上面定义的参数保持一致
    // headingRowHeight: _headerHeight,
    // dataRowHeight: _rowHeight,
    columns: const <DataColumn>[
      DataColumn(
        label: Text('Number'),
      ),
      DataColumn(
        label: Text('Amount'),
      ),
      DataColumn(
        label: Text('Delete'),
      ),
    ],
    rows: [
      for (int i = 0; i < _jodies.length; i++)
        DataRow.byIndex(index: i, cells: <DataCell>[
          DataCell(Text(_jodies[i]['number']
                      .toString()
                      .length == 1
              ? '0${_jodies[i]['number'].toString()}'
              : _jodies[i]['number'].toString())),
          DataCell(Text(
              _jodies[i]['amount'].toString(),
              style: TextStyle(
                  color: selectedJodi == i
                      ? Colors.red
                      : Colors.black))),
          DataCell(
            IconButton(
              icon: Icon(
                Icons.delete_forever,
                color: Colors.red,
                size: 24.0,
              ),
              highlightColor: Colors.red,
              onPressed: () {
                _showDeleteConfirmation(i, 'jodi');
              },
            ),
          ),
        ]),
    ],
  ),
)

步骤3：实现滚动跳转方法 #

添加滚动到指定索引的方法，在你获取到搜索目标索引后调用即可：

void _scrollToTargetRow(int targetIndex) {
  // 校验索引合法性
  if (targetIndex < 0 || targetIndex >= _jodies.length) return;
  // 计算目标位置偏移量：表头高度 + 目标索引 * 单行高度
  final targetOffset = _headerHeight + targetIndex * _rowHeight;
  // 执行滚动动画
  _tableScrollController.animateTo(
    targetOffset,
    duration: const Duration(milliseconds: 300),
    curve: Curves.easeInOut,
  );
}

注意事项 #

• 原生DataTable没有懒加载能力，2000余条数据会一次性全部渲染，容易出现卡顿，建议优先使用PaginatedDataTable做分页展示，减少单次渲染的元素数量。
• 如果你的表格需要支持水平滚动，可以再嵌套一层SingleChildScrollView，设置scrollDirection: Axis.horizontal即可。
• 如果你自定义了DataTable的行高、表头高度，必须同步修改_rowHeight和_headerHeight的值，否则滚动位置会出现偏差。

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