Flutter - TextField 在焦点上重建小部件答案

【问题标题】：Flutter - TextField rebuilds widget on focusFlutter - TextField 在焦点上重建小部件
【发布时间】：2019-06-02 05:57:05
【问题描述】：

效果就是打不开键盘。我在其他地方对这个问题进行了一些挖掘，大多数问题是小部件是有状态的（但我的不是）。以下是LoginWidget。我正在使用提供程序包，我怀疑它可能会在幕后做一些事情。谁能发现我看不到的东西？：

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String email, password;
    final GlobalKey<FormState> formKey = GlobalKey<FormState>();
    return ChangeNotifierProvider<LoginModel>(
        builder: (context) => LoginModel(ViewState.Idle),
        child: Consumer<LoginModel>(
            builder: (context, model, child) => Scaffold(
                  appBar: AppBar(
                    title: Text("Sign in"),
                  ),
                  body: Form(
                      key: formKey,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          TextFormField(
                            validator: (input) {
                              if (input.isEmpty) {
                                return "Email required";
                              }
                            },
                            onSaved: (input) => email = input,
                            decoration: InputDecoration(labelText: 'Email'),
                          ),
                          TextFormField(
                            validator: (input) {
                              if (input.isEmpty) {
                                return "Password required";
                              }
                            },
                            onSaved: (input) => password = input,
                            decoration: InputDecoration(labelText: 'Password'),
                            obscureText: true,
                          ),
                          model.state == ViewState.Loading
                              ? CircularProgressIndicator()
                              : RaisedButton(
                                  onPressed: () async {
                                    if (formKey.currentState.validate()) {
                                      formKey.currentState.save();
                                      bool success =
                                          await model.login(email, password);
                                      if (success) {
//                                  Navigator.pushNamed(context, '/');
                                        Navigator.pushReplacement(
                                          context,
                                          MaterialPageRoute(
                                              builder: (context) => HomePage()),
                                        );
                                      }
                                    }
                                  },
                                  child: Text('Sign in'),
                                ),
                          if (model.state == ViewState.Error)
                            Center(child: Text(model.apiErrorMessage))
                        ],
                      )),
                )));
  }
}

【问题讨论】：

你想达到什么目的......你想禁用自动对焦吗？
我根本不知道提供程序包，所以我不会回答这个问题，但是每当我看到键盘没有出现时，那是因为您尝试访问的 textField 位于与您的主要焦点范围不同的导航器。尝试将您的表单包装在 FocusScope 中，看看是否有帮助。
可以在调用LoginPage小部件时添加代码吗？

标签： flutter textfield

【解决方案1】：

解决方案是将final GlobalKey<FormState> formKey = GlobalKey<FormState>() 移出构建器并使其成为static。

【讨论】：

【解决方案2】：

但是，如果您有一个“登录页面”列表，它将触发小部件使用相同的键。我更喜欢用 Consumer 小部件包装父小部件。

【讨论】：

您介意解释一下为什么会这样吗？很抱歉新来这里。
避免不必要的小部件重建。在 build 方法中，通过打印类的名称来检查构建，你会得到它。