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'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

关闭键盘时清除Flutter TextFormFields

1 个答案: