用户名字段和继续按钮在 flutter 中不可见

Question

我正在尝试创建一个设置页面，但用户名字段和继续按钮不可见。 请帮忙。 用户名字段和继续按钮在 flutter 中不可见。 我正在尝试创建一个设置页面，但用户名字段和继续按钮不可见。 请帮忙。 用户名字段和继续按钮在 flutter 中不可见。 我正在尝试创建一个设置页面，但用户名字段和继续按钮不可见。 请帮忙。 用户名字段和继续按钮在 flutter 中不可见。

    class CreateAccountPage extends StatefulWidget {
  @override
  _CreateAccountPageState createState() => _CreateAccountPageState();
}
class _CreateAccountPageState extends State<CreateAccountPage> {
  final _scaffoldKey = GlobalKey<ScaffoldState>();
  final _formKey = GlobalKey<FormState>();
  String username;
  submitUsername(){
    final form = _formKey.currentState;
    if(form.validate())
    {
      form.save();
      SnackBar snackBar = SnackBar(content: Text("Welcome " + username));
      _scaffoldKey.currentState.showSnackBar(snackBar);
      Timer(Duration(seconds: 4),(){
        Navigator.pop(context, username);
      });
    }
  }
    @override
  Widget build(BuildContext parentContext) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: header(context, strTitle: "Settings", disappearedBackButton:true), //only settings is visible
      body: ListView(
        children: <Widget>[
          Container(
            child: Column(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(top: 26.0),
                  child: Center(
                    child: Text("Set up user name", style: TextStyle(fontSize: 260),),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(17.0),
                  child: Container(
                    child: Form(
                      key: _formKey,
                      autovalidate: true,
                      child: TextFormField(
                        style: TextStyle(color: Colors.white),
                        validator: (val){
                          if(val.trim().length<5 || val.isEmpty){
                            return "user name is too short";
                          }
                          else if(val.trim().length>15){
                            return "user name is too long";
                          }
                          else{
                            return null;
                          }
                        },
                        onSaved: (val) => username = val,
                        decoration: InputDecoration(
                          enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.grey),
                          ),
                          focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.white),
                          ),
                          border: OutlineInputBorder(),
                          labelText: "Username",
                          labelStyle: TextStyle(fontSize: 16.0),
                          hintText: "must be atleast 5 character",
                          hintStyle: TextStyle(color: Colors.grey),
                        ),
                      ),
                    ),
                  ),
                ),
                GestureDetector( //not displaying
                  onTap: submitUsername,
                  child: Container(
                    height: 55.0,
                    width: 360.0,
                    decoration: BoxDecoration(
                      color: Colors.lightGreenAccent,
                      borderRadius: BorderRadius.circular(8.0),
                    ),
                    child: Text(
                      "proceed",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

对于缺少的用户名字段，是否有可能正在显示它，但是因为您将其颜色设置为白色，所以您看不到它？

...
child: TextFormField(
  style: TextStyle(color: Colors.white), // Change this, or leave it out
...

我会使用RaisedButton(....)或FlatButton(...)作为您的继续按钮。 而不是手势检测器。