关闭键盘时 TextFormField 数据消失答案

【问题标题】：TextFormField data disappear when closing the Key Board关闭键盘时 TextFormField 数据消失
【发布时间】：2019-03-16 10:32:46
【问题描述】：

我正在构建一个颤振应用程序，我有一个Register 表单。我正在使用TextFormFields，下面是我的代码。

import 'package:flutter/material.dart';

class RegisterPage extends StatelessWidget {
  final borderColorGreen = const Color(0xff339966);

  TextEditingController nameTxtController =TextEditingController();
  TextEditingController emailTxtController =TextEditingController();
  TextEditingController mobileTxtController =TextEditingController();
  TextEditingController passwordTxtController =TextEditingController();
  TextEditingController confirmPasswordTxtController =TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/background_login_5.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        child: ListView(
          children: <Widget>[
            _buildTitleSection(),
            _buildInputFields("Name",nameTxtController),
            _buildInputFields("Email",emailTxtController),
            _buildInputFields("Mobile",mobileTxtController),
            _buildInputFields("Password",passwordTxtController),
            _buildInputFields("Confirm Password",confirmPasswordTxtController),
            _buildRegisterButton(),
          ],
        ),
      ),
    );
  }

  Widget _buildTitleSection() {
    return Container(
        margin: EdgeInsets.only(top: 40),
        padding: EdgeInsets.all(32),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "something.xyz",
              style: TextStyle(
                color: borderColorGreen,
                fontWeight: FontWeight.w900,
                fontSize: 25,
              ),
            ),
          ],
        ));
  }

  Widget _buildInputFields(String label, TextEditingController textController) {
    return Container(
        margin: EdgeInsets.only(left: 20, bottom: 20),
        child: Column(
          children: <Widget>[

            Container(
              padding: EdgeInsets.only(right: 20),
              child: Row(
                children: <Widget>[
                  Flexible(
                    child: TextFormField(
                      controller: textController,
                      style: new TextStyle(color: Colors.white),
                      decoration: InputDecoration(
                        labelText: label,
                        fillColor: Colors.white,
                        labelStyle: TextStyle(
                            color: Colors.white, fontWeight: FontWeight.w600),
                        enabledBorder: OutlineInputBorder(
                          borderSide: const BorderSide(
                              color: Colors.white30, width: 2.0),
                          borderRadius: BorderRadius.circular(25.0),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ));
  }





  Widget _buildRegisterButton() {
    return Container(
      margin: EdgeInsets.only(top: 10, right: 20, left: 20),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Flexible(
              child: SizedBox(
                  width: double.infinity, // match_parent
                  child: RaisedButton(
                    child: Text(
                      "Create Account",
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 18,
                          fontWeight: FontWeight.normal),
                    ),
                    shape: RoundedRectangleBorder(
                        borderRadius: new BorderRadius.circular(30.0)),
                    color: borderColorGreen,
                    onPressed: () {},
                  )))
        ],
      ),
    );
  }


}

当我点击TextField 时，键盘打开，我可以输入文本。但是，如果我按下手机的 返回按钮 关闭键盘，那么我从所有字段中输入的文本。我指的是 Android 手机中可用的硬件后退按钮。

该表单是可滚动的，在将文本输入到 TextField 后，如果我单击另一个 TextField，文本会按原样保留在那里。如果我按后退按钮关闭键盘，表单中的所有文本都会消失。

我该如何解决这个问题？

【问题讨论】：

当键盘打开时你不应该看到向下按钮而不是返回按钮吗？
@Amsakanna ：我说的是手机中的后退按钮。
请将小部件更改为StatefulWidget。
啊！我知道了。你说的是硬件按钮。尽管如此，我还是在我的手机中尝试了你的代码（带有软件后退按钮），它运行良好。
@HemanthRaj：是的，这就是问题所在。我没有将类转换为StatefulWidget，而是通过扩展StatefulWidget 制作了另一个类。请提供您的评论作为答案，无需代码。

标签： android dart flutter flutter-layout

【解决方案1】：

请将您的小部件更改为StatefulWidget，这不会导致控制器重置。

希望有帮助！

【讨论】：

我的小部件是有状态的但同样的问题？
@AbdelrahmanM.Elmarakby 你能对有状态的小部件进行排序吗？我也有同样的经历
我不记得了，但我认为是因为未来的建设者

【解决方案2】：

问题说明：
如果重建有状态小部件，则其中的所有小部件都会重建（包括无状态小部件）
关闭键盘会触发重建。

由于您在无状态小部件内初始化 new TextEditingController()，因此每次重建时都会重新初始化，因此您会丢失数据

解决方案 1：
转换为 Stateful Widget

解决方案 2：
您可以将nameTxtController 作为参数传递给无状态小部件

class RegisterPage extends StatelessWidget {

  RegisterPage({this.nameTxtController);
  TextEditingController nameTxtController;
  ...

解决方案说明：
Solution 1 之所以有效，是因为 Stateful Widgets 拥有您的控制器，因为它与 Stateless Widgets 不同，它拥有自己的内存。

Solution 2 有效，因为参数作为参考并且在重建时没有重新初始化

【讨论】：