Flutter使用PageView切换页面后TextFormField已输入内容丢失是什么原因

• PageView默认未开启子页面保活，当页面滑出视口后，对应的子组件、State实例会被系统销毁，你现在用的_emailCtrl控制器属于子页面State，销毁后再切回来会重新初始化控制器，自然没有之前输入的内容。
• 你当前代码仅在输入时把值同步到了email变量，但子页面重建时没有把存储的email值回写到输入框中，也会导致显示为空。

方案1：子页面保活（推荐） #

给表单子页的State混入AutomaticKeepAliveClientMixin，让页面切出后不被销毁，代码修改如下：

class 你的表单页State类名 extends State<你的表单页类名> with AutomaticKeepAliveClientMixin {
  // 重写该属性返回true开启保活
  @override
  bool get wantKeepAlive => true;

  late TextEditingController _emailCtrl;

  @override
  void initState() {
    super.initState();
    _emailCtrl = TextEditingController();
  }

  @override
  Widget build(BuildContext context) {
    // 必须调用父类build方法，保活逻辑才会生效
    super.build(context);
    // 这里原样返回你现有的Form代码即可
    return Form(
      key: EmailKeys.formKey,
      // 剩余原有代码不变
    );
  }

  @override
  void dispose() {
    _emailCtrl.dispose();
    super.dispose();
  }
}

方案2：上层存储表单值+重建回写 #

如果不需要保活页面，就把email等表单变量存在PageView的父组件中，子页面初始化时把传入的email赋值给控制器初始值即可：

// 子页面State的initState方法修改
@override
void initState() {
  super.initState();
  // 把父组件传递的email值作为控制器初始值
  _emailCtrl = TextEditingController(text: widget.parentEmail);
}

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