Flutter中使用Visibility组件实现分步表单如何保留输入值

你目前使用的Visibility组件默认配置下，当visible属性为false时，会直接将子组件从Widget树中移除，绑定的TextEditingController对应的输入框组件被销毁，再次显示时会重新创建组件，原有输入内容就会丢失。

• 方案1：修改Visibility组件配置，主动开启状态保留
  设置maintainState为true，同时配套开启相关属性即可让组件在隐藏时不被销毁，保留原有状态：

Visibility(
  visible: _currentStep == 0,
  maintainState: true, // 核心配置：保留组件状态
  maintainAnimation: true,
  maintainSize: true,
  child: Column(
    children: [
      TextFormField(
        controller: _nameCtl,
        decoration: InputDecoration(
          labelText: 'Phone',
        ),
      )
    ],
  )
)

该方案实现简单，适合步骤较少、表单内容简单的场景，缺点是所有隐藏的表单组件都会留在Widget树中，步骤过多时会占用更多内存。

• 方案2：使用Offstage组件替代Visibility
Offstage组件默认会保留子组件的状态，仅控制是否绘制显示，无需额外配置属性：

Offstage(
  offstage: _currentStep != 0, // 为true时隐藏组件
  child: Column(
    children: [
      TextFormField(
        controller: _nameCtl,
        decoration: InputDecoration(
          labelText: 'Phone',
        ),
      )
    ],
  )
)

• 方案3：独立存储表单数据（最稳定，推荐）
  将表单输入值存在State类的成员变量中，和组件生命周期解耦，哪怕组件销毁重建也不会丢失数据，适合任意复杂度的分步表单场景：

// 定义在State类中，不要放在build方法内
String _phoneValue = '';
final _nameCtl = TextEditingController();

@override
void initState() {
  super.initState();
  // 初始化时给控制器赋值存储的旧值
  _nameCtl.text = _phoneValue;
  // 监听输入变化，实时保存输入内容
  _nameCtl.addListener(() {
    _phoneValue = _nameCtl.text;
  });
}

• 不要将TextEditingController定义在build方法内部，否则每次页面刷新都会重新创建控制器，也会导致输入内容丢失
• 示例代码中currentStep变量定义时没有下划线，后续状态更新时用的是_currentStep，注意保持变量名一致避免逻辑错误

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