Question

我有一个Form，里面有很多TextFormFields，（现在）只有一个DropDownButton。

当我点击其中一个TextFormFields时，键盘会闪烁，但不会熬夜。我找到的唯一解决方法是开始在我的电脑键盘上打字以使手机键盘自动弹出 - 显然不会在任何地方打字 - 然后，当键盘已经启动时，点击TextFormField然后我可以输入文本，但只要我从该字段中取出，输入的文本就会消失。这个绑定在除Name之外的所有字段上都是无效的，因为它们的keyboardTypes是数字键盘。因此，由于既不输入字母或数字也不会在手机上传唤这个键盘，因此无法让这些字段的键盘实现。

我确定表单是问题，因为使用相同的分层，如果我将Padding的子项更改为直接转到同一个ListView，则所有的TextFormField问题消失了。

我选择不为DropDownButton问题包含相关代码，因为它可能不相关，因为它是我暂时删除表单小部件时唯一无法解决的问题。

Keyboard will not pop

With temporary workaround, entered text still will not remain after exiting field

DropDownButton wont display selected value

class NewPage extends MaterialPageRoute<Null>{
 final formKey = GlobalKey<FormState>();
 String _name;

 void _submit(){
  final form = formKey.currentState;
  if(form.validate()){
   form.save();
   print("$_name");
  }
 }
 final name = TextFormField(
  //all other TextFormFields are declared as name is
  validator: (val) =>
   val.isEmpty? "Name can't be empty.': null,
  onSaved: (val) => _name = val,
  decoration: InputDecoration(
   labelText: "Name",
   labelStyle: TextStyle(
    fontSize: 20.0,
   ),
   contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 12.0),
   border: OutlineInputBorder(
    borderRadius: BorderRadius.circular(20.0),
   )
  )
 );
 final age = TextFormField(
  keyboardType: TextInputType.number,
  validator: null,
  decoration: InputDecoration(
   labelText: "Age",
   labelStyle: TextStyle(
    fontSize: 20.0,
   ),
   contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 12.0),
   border: OutlineInputBorder(
    borderRadius: BorderRadius.circular(20.0),
   )
  ),
 );
 return Scaffold(
  body: Padding(
   padding: EdgeInsets.symmetric(horizontal: 20.0),
   child: new Form(
    key: formKey,
     child: new ListView(
      children: <Widget> [
       SizedBox(height: 100.0),
       name,
       SizedBox(height: 20.0),
       new Text("Sex:"),
       sex,
       SizedBox(height: 20.0),
       age,
       //and so on
       new RaisedButton(
        onPressed: _submit,
        child: new Text("Go"),
       ),
      ],
     ),
   ),
  ),
 );
}

Answer 1

我认为问题可能源于class NewPage extends MaterialPageRoute<Null>。除非你正在创建一个新的路由子类来显着改变路由的行为，否则你不应该从它扩展 - 如果你正在扩展它，那么它将在你深入理解颤振如何工作之后。

我相信您要做的是扩展StatefulWidget并创建相应的State＆lt;＆gt;。如果您出于某种原因需要建立路线，您仍然可以传递一个符合您需要的构建器，即new MaterialPageRoute(builder: (context) => new NewPage())。

当我在模拟器中运行它时，这适用于我。我在下拉列表中添加的仅仅是为了娱乐= D。

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() => runApp(new MaterialApp(home: new NewPage()));

class NewPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new NewPageState();
}

class NewPageState extends State<NewPage> {
  final formKey = GlobalKey<FormState>();
  String _name;

  String _sex;

  void _submit() {
    final form = formKey.currentState;
    if (form.validate()) {
      form.save();
      print("$_name");
    }
  }

  @override
  Widget build(BuildContext context) {
    final name = TextFormField(
      //all other TextFormFields are declared as name is
      validator: (val) => val.isEmpty ? "Name can't be empty." : null,
      onSaved: (val) => _name = val,
      decoration: InputDecoration(
        labelText: "Name",
        labelStyle: TextStyle(
          fontSize: 20.0,
        ),
        contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 12.0),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(20.0),
        ),
      ),
    );
    final age = TextFormField(
      keyboardType: TextInputType.number,
      validator: null,
      decoration: InputDecoration(
        labelText: "Age",
        labelStyle: TextStyle(
          fontSize: 20.0,
        ),
        contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 12.0),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(20.0),
        ),
      ),
    );
    final sex = DropdownButton(
      items: [
        new DropdownMenuItem(child: new Text("Male"), value: "male"),
        new DropdownMenuItem(child: new Text("Female"), value: "female"),
        new DropdownMenuItem(child: new Text("Other"), value: "other"),
      ],
      onChanged: (val) => setState(() => _sex = val),
      value: _sex,
    );
    return new Scaffold(
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 20.0),
        child: new Form(
          key: formKey,
          child: new ListView(
            children: <Widget>[
              SizedBox(height: 100.0),
              name,
              SizedBox(height: 20.0),
              new Text("Sex:"),
              sex,
              SizedBox(height: 20.0),
              age,
              //and so on
              new RaisedButton(
                onPressed: _submit,
                child: new Text("Go"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

如果这不能解决问题，一些额外的信息（例如您正在使用的设备）将会有所帮助。另外，发布一个实际编译的代码示例可以帮助我们 - 我建议在下次发布问题之前检查一下。

Answer 2

请勿将所有TextFormFields包裹在同一表格中。这不是一个好习惯，并且会导致很多问题。

分别包装每个字段，并确保使用不同的键。分别验证它们。并尝试使用onChanged方法或onEditingComplete方法而不是onSaved方法立即保存字符串。

此外，仅在值有效时才保存该值。不要那样做，这可能是问题所在。

Flutter Form Widget不会显示文本或键盘

2 个答案: