Flutter跳转含大量TextFormField的页面卡顿延迟问题如何解决

问题根因 #

• 你当前采用SingleChildScrollView嵌套静态Table的写法，会在页面初始化时一次性渲染全部60行TextFormField，无懒加载机制，UI线程需要一次性完成所有组件的布局、绘制逻辑，导致跳转时卡顿
• TextFormField属于有状态组件，初始化时会内置处理焦点管理、表单校验配置等逻辑，批量同步创建会大量占用UI线程资源，拖慢跳转动画渲染速度

卡顿效果参考：

优化方案 #

方案1：替换为懒加载列表（优先推荐） #

将静态渲染的Table替换为ListView.builder懒加载组件，只有条目进入可视区域时才会渲染，大幅降低页面初始化的性能开销，参考代码：

class _SampleState extends State<Sample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 替换原SingleChildScrollView+静态Table组合
      body: ListView.builder(
        itemCount: 60,
        itemBuilder: (context, index) {
          // 如需保留表格对齐效果，可直接用Row固定列宽，性能优于Table组件
          return Row(
            children: [
              const Expanded(flex: 1, child: Text('Name')),
              Expanded(
                flex: 2,
                child: TextFormField(decoration: const InputDecoration()),
              ),
            ],
          );
        },
      ),
    );
  }
}

方案2：异步延迟跳转 #

如果业务场景必须一次性渲染所有表单项，可以调整跳转逻辑，等当前帧渲染完成后再执行页面跳转，避免卡住首页的交互反馈，按钮点击事件参考写法：

onPressed: () async {
  // 等待当前帧渲染完成
  await Future.microtask(() {});
  if (mounted) {
    Navigator.push(context, MaterialPageRoute(builder: (context) => const SamplePage()));
  }
}

方案3：简化表单项配置 #

• 为每个TextFormField配置唯一Key，减少组件重建时的无效校验开销
• 非必要场景下将autovalidateMode设置为AutovalidateMode.disabled，仅在表单提交时触发校验
• 无内置表单校验需求时，可使用更轻量的TextField替代TextFormField

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