关闭键盘时清除 Flutter TextFormFields

Question

与我在标题中描述的差不多。当应用程序启动时，我有一堆从 Firebase 填充的 TextFormFields。

用户应该能够更新这些，完成后，单击提交按钮更新数据库。数据库代码一切正常，但是存在一些错误，其工作方式如下：

TextFormField1:   "New Text Entered"
TextFormField2:   "Some more text"
TextFormField3:   "Another update here"

现在我们需要关闭键盘，这样我们才能看到下面的提交按钮。只要您单击向下的小箭头关闭键盘，上面的所有更改都会恢复到原来的状态。

有人看过吗？

我在运行时预填充这些字段中的数据，您可以编辑和更新文本，一切正常...除非您最小化键盘。

请告诉我，Flutter 并没有做一些根本上愚蠢的事情，比如每次你要求键盘消失时从头开始重新加载下面的小部件......感觉有点像。

Answer 1

是的。它总是发生在我身上。这是因为底部插图（由于键盘）发生变化时屏幕会重建。

将 TextFormField(s) 包含在 Form 中并给它一个全局密钥。
使用局部变量存储 TextFormField 的值。在 onChanged 方法中更新它。全部完成！

为了方便起见，我附上代码。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: LoginScreen(),
    );
  }
}

// Login Screen
class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
  static GlobalKey<FormState> _loginScreenFormKey = GlobalKey<FormState>();
}

class _LoginScreenState extends State<LoginScreen> {
  String username;
  String password;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Form(
          key: LoginScreen._loginScreenFormKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(
                  hintText: 'Enter username',
                ),
                onChanged: (value) {
                  setState(() {
                    username = value;
                  });
                },
              ),
              TextFormField(
                decoration: InputDecoration(
                  hintText: 'Enter username',
                ),
                onChanged: (value) {
                  setState(() {
                    password = value;
                  });
                },
                obscureText: true,
              ),
              RaisedButton(
                onPressed: () {
                  LoginScreen._loginScreenFormKey.currentState.save();
                },
                child: Text('submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

包含那些TextFormFields的class应该扩展StatefulWidget的状态，如果关闭键盘导致这些字段re-render，本地状态将被清除，因此您需要StatefulWidget来保存本地状态这样就不会 re-rendered

将您的 StatelessWidget 转换为 StatefulWidget。

关闭键盘时清除 Flutter TextFormFields

Flutter TextFormFields clear when dismissing keyboard

flutter

android-softkeyboard

form-fields