Flutter，隐藏虚拟键盘时文本字段值变空

Question

我正在尝试为我的应用创建登录和注册页面，我在两个屏幕中都使用了 statefull 小部件。 填写注册或登录表单并隐藏键盘以按下注册或登录按钮后，我得到“字符串为空”结果，同样在按下时，我试图在控制台中打印我的电子邮件和密码，但我得到一个空字段.但是，如果我在虚拟设备中仍然打开虚拟键盘的情况下尝试相同的操作，我能够打印出字符串，据我所知，只有在隐藏键盘时才会发生错误。 这是我的输入字段类

    class RoundedInputField extends StatefulWidget {
  final String hintText;
  final ValueChanged<String> onChanged;
  final Color color;
  final bool boolean;

  RoundedInputField({
    Key key,
    this.hintText,
    this.onChanged,
    this.color,
    this.boolean = false,
  }) : super(key: key);

  @override
  _RoundedInputFieldState createState() => _RoundedInputFieldState();
}

class _RoundedInputFieldState extends State<RoundedInputField> {
  @override
  Widget build(BuildContext context) {
    return TextFieldContainer(
      child: TextFormField(
        onChanged: widget.onChanged,
        obscureText: widget.boolean,
        decoration: InputDecoration(
          hintText: widget.hintText,
          border: InputBorder.none,
        ),
      ),
    );
  }
}

class TextFieldContainer extends StatefulWidget {
  final Widget child;
  final Color color;

  const TextFieldContainer({
    Key key,
    this.child,
    this.color: Colors.white,
  }) : super(key: key);

  @override
  _TextFieldContainerState createState() => _TextFieldContainerState();
}

class _TextFieldContainerState extends State<TextFieldContainer> {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10),
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
      width: size.width * 0.8,
      decoration: BoxDecoration(
        color: widget.color,
        borderRadius: BorderRadius.circular(29),
      ),
      child: widget.child,
    );
  }
}

我调用 RoundedInputField

 RoundedInputField(
              hintText: "Email",
              onChanged: (val) {
                email = val;
              },

这是我的注册按钮，目前我只打印值

Container(
              margin: EdgeInsets.symmetric(vertical: 10),
              width: size.width * 0.8,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(29),
                child: FlatButton(
                  padding: EdgeInsets.symmetric(vertical: 20, horizontal: 40),
                  color: Colors.white,
                  onPressed: () async {
                    
                    print(email);
                    print(password);
                   
                    
                  },
                  child: Text(
                    'login',
                    style: GoogleFonts.montserrat(
                        color: HexColor(studentPrimaryColour), fontSize: 20),
                  ),
                ),
              ),
            ),

这是我的登录界面

class StudentLoginScreen extends StatefulWidget {
  StudentLoginScreen();

  @override
  _StudentLoginScreenState createState() => _StudentLoginScreenState();
}

class _StudentLoginScreenState extends State<StudentLoginScreen> {
  @override
  Widget build(BuildContext context) {
    final AuthService _authService = AuthService();
    Size size = MediaQuery.of(context).size;
    String email = '';
    String password = '';
    return Scaffold(
      backgroundColor: HexColor(studentPrimaryColour),
      body: SafeArea(
        child: ListView(
          children: <Widget>[
            SizedBox(
              height: 25.0,
            ),
            HeadingText(
              text: 'Login',
              size: 60.0,
              color: Colors.white,
            ),
            SizedBox(
              height: 25.0,
            ),
            RoundedInputField(
              hintText: "Email",
              onChanged: (val) {
                email = val;
              },
            ),
            SizedBox(
              height: 5.0,
            ),
            RoundedInputField(
              hintText: "Password",
              boolean: true,
              onChanged: (val) {
                password = val;
              },
            ),
            SizedBox(
              height: 15.0,
            ),
            Container(
              margin: EdgeInsets.symmetric(vertical: 10),
              width: size.width * 0.8,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(29),
                child: FlatButton(
                  padding: EdgeInsets.symmetric(vertical: 20, horizontal: 40),
                  color: Colors.white,
                  onPressed: () async {
                    
                    print(email);
                    print(password);
                   

                   
                  },
                  child: Text(
                    'login',
                    style: GoogleFonts.montserrat(
                        color: HexColor(studentPrimaryColour), fontSize: 20),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 15.0,
            ),
            InkWell(
              onTap: () {
                Navigator.pushNamed(context, '/studentRegisterScreen');
              },
              child: HeadingText(
                text: 'register?',
                color: Colors.white,
                size: 10,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

在您的登录屏幕中，您在build 方法中声明并初始化了email 和password 两个属性。这实质上的意思是，一旦你的登录小部件被重建（例如当隐藏键盘时，因为 Flutter 必须重新计算大小等等）两个属性都会再次用 '' 初始化。

这也是StatefulWidget 的用途——将属性定义为状态的一部分，而不是构建周期的一部分。换句话说，把它改成这样：

class StudentLoginScreen extends StatefulWidget {
  StudentLoginScreen();

  @override
  _StudentLoginScreenState createState() => _StudentLoginScreenState();
}

class _StudentLoginScreenState extends State<StudentLoginScreen> {
  String email = '';
  String password = '';

  @override
  Widget build(BuildContext context) {
  ...
}