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

Question

我有一个表单，里面有很多 TextFormField 和(目前)一个 DropDownButton。

当我点击其中一个 TextFormFields 时，键盘会闪烁但不会停留。我发现的唯一解决方法是开始在我的计算机键盘上打字，让手机键盘自行弹出 - 显然不是在任何地方打字 - 然后，当键盘已经启动时，点击 TextFormField 然后我是能够输入文本，但是一旦我点击出该字段，输入的文本就会消失。这个创可贴对除Name以外的所有字段都无效，因为它们的keyboardTypes都是数字键盘。因此，由于既不输入字母也不输入数字会在手机上调用此键盘，因此不可能让这些字段的键盘具体化。

我确信表单是问题所在，因为对于相同的分层，如果我将 Padding 的子项更改为直接转到相同的 ListView，所有 TextFormField 问题都会消失。

我选择不包括我的 DropDownButton 问题的相关代码，因为它可能不相关，因为它是唯一在我临时删除 Form 小部件时没有解决的问题。

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> .除非你正在创建一个新的路由子类来显着改变路由的行为，否则你不应该从它扩展——如果你要扩展它，那将是在你对 flutter 的工作原理有深刻的理解之后。

我相信您想要做的是扩展 StatefulWidget 并制作相应的 State<>。如果您出于某种原因需要制作路线，您仍然可以传入一个可以满足您需要的构建器，即 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"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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