Flutter Column渲染大量行时滚动卡顿 千行级表格流畅滚动方案

卡顿的核心原因是当前实现完全没有做懒加载，一次性完成所有行的构建、布局、绘制：

• SingleChildScrollView + Column + List.generate的组合会在首屏就把1000行组件全部初始化，哪怕90%以上的行都在屏幕视口之外，Web端因为绘制链路额外开销更高，首屏构建耗时会被放大到数秒
• 滚动过程中所有行都会参与布局计算、重绘逻辑，没有视口裁剪和元素回收机制，滚动帧率会随行数增加线性下降
• 内置Table组件同样采用全量子元素布局逻辑，不支持懒加载，因此会出现完全一致的性能问题

按照优先级依次落地即可实现千行级表格的流畅滚动：

• 替换滚动容器为懒加载列表
  把外层的SingleChildScrollView+Column替换为ListView.builder，该组件内置视口懒加载机制，仅会构建当前视口内+前后少量缓存区域的行元素，千行规模下同时存活的行组件仅为20个左右，首屏构建和滚动计算量直接下降98%以上。
• 移除行内弹性布局计算
  当前每行使用Expanded做弹性列宽适配，每一行渲染时都要单独执行横向布局计算，累计开销极高。可以在表格初始化时提前根据可用宽度、flex比例计算好每一列的固定宽度，行内直接使用固定宽度的SizedBox/Container承载单元格内容，省去每行重复的弹性布局计算。
• 隔离重绘区域
  给每个行组件包裹RepaintBoundary，滚动时仅更新进入视口的行内容，不会触发整表重绘，Web端收益尤其明显。
• 双向滚动场景适配
  如果需要支持横向滚动查看多列，使用两个嵌套的可滚动组件分别处理纵向、横向滚动，两个方向都采用懒加载逻辑，不要使用全量布局的组件实现双向滚动。

import 'package:flutter/material.dart';

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

  @override
  State<MyOptimizedTable> createState() => _MyOptimizedTableState();
}

class _MyOptimizedTableState extends State<MyOptimizedTable> {
  final double columnSpace = 5;
  final double rowSpace = 5;
  final double rowHeight = 40;
  final double fixedActionColWidth = 90;
  // 列flex配置
  final List<int> columnFlex = const [10,4,3,3,3];

  late final BoxDecoration cellDecoration = BoxDecoration(
    borderRadius: BorderRadius.circular(5),
    color: Colors.grey,
  );

  // 提前计算好每列宽度，避免每行重复计算
  List<double>? columnWidths;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 首次布局时计算所有列的固定宽度
        columnWidths ??= _calculateColumnWidths(constraints.maxWidth);
        return ListView.builder(
          // 千行数据
          itemCount: 1000,
          // 提前设置固定行高，省去滚动时动态计算行高的开销
          itemExtent: rowHeight + columnSpace,
          itemBuilder: (context, index) {
            return RepaintBoundary(
              child: _buildRow(index),
            );
          },
        );
      },
    );
  }

  List<double> _calculateColumnWidths(double totalWidth) {
    // 减去所有列间距、固定操作列宽度，剩下的按flex分配
    final totalSpacing = rowSpace * columnFlex.length;
    final availableWidth = totalWidth - totalSpacing - fixedActionColWidth;
    final totalFlex = columnFlex.reduce((a,b) => a+b);
    return columnFlex.map((flex) => availableWidth * flex / totalFlex).toList();
  }

  Widget _buildRow(int index) {
    return Column(
      children: [
        SizedBox(
          height: rowHeight,
          child: Row(
            children: [
              // 按提前算好的固定宽度渲染单元格
              for (int i = 0; i < columnFlex.length; i++) ...[
                _buildFixedWidthCell(columnWidths![i], index.toString()),
                SizedBox(width: rowSpace),
              ],
              // 固定宽度操作列
              Container(
                decoration: cellDecoration,
                width: fixedActionColWidth,
                height: double.infinity,
              )
            ],
          ),
        ),
        SizedBox(height: columnSpace),
      ],
    );
  }

  Widget _buildFixedWidthCell(double width, String content) {
    return Container(
      width: width,
      height: double.infinity,
      decoration: cellDecoration,
      child: Center(child: Text(content)),
    );
  }
}

额外说明：如果需要冻结首列/表头、支持排序筛选等复杂表格能力，在上述懒加载逻辑基础上扩展即可，不要使用全量构建的组件实现，就不会出现千行规模下的卡顿问题。

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