RenderFlex溢出 - flutter

3

你好,我是Flutter的新手,正在尝试编写我的第一个应用程序。我遇到了Flutter(Dart) RenderFlex溢出像素的问题。

我已经尝试了多种不同的方法来完成这个任务,但是仍然使用ListView.Builder失败了。有没有更好的方法来解决这个问题?

以下是我的代码,感谢您提前的指导。

class Register extends StatefulWidget {

final Function toggleView;
Register({ this.toggleView });

@override
_RegisterState createState() => _RegisterState();
}

class _RegisterState extends State<Register> {

final AuthService _auth = AuthService();
final _formKey = GlobalKey<FormState>();
String error = '';
bool loading = false;

// text field state
String email = '';
String password = '';
String confirmpwd ='';

@override
Widget build(BuildContext context) {
  return loading ? Loading() : Scaffold(
    backgroundColor: Colors.white,
    appBar: AppBar(
    backgroundColor: Colors.blue[400],
    elevation: 0.0,
    title: Text('Sign up to Tenant App'),
    actions: <Widget>[
      FlatButton.icon(
        icon: Icon(Icons.person),
        label: Text('Sign In'),
        onPressed: () => widget.toggleView(),
      ),
    ],
  ),
  body: Container(
    padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 50.0),
    child: Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          SizedBox(height: 20.0),
          TextFormField(
            decoration: textInputDecoration.copyWith(hintText: 'email'),
            validator: (val) => val.isEmpty ? 'Enter an email' : null,
            onChanged: (val) {
              setState(() => email = val);
            },
          ),
          SizedBox(height: 20.0),
          TextFormField(
            decoration: textInputDecoration.copyWith(hintText: 'password'),
            obscureText: true,
            validator: (val) => val.length < 6 ? 'Enter a password 6+ chars long' : null,
            onChanged: (val) {
              setState(() => password = val);
            },
          ),
          SizedBox(height: 20.0),
          TextFormField(
            decoration: textInputDecoration.copyWith(hintText: 'password'),
            obscureText: true,
            validator: (val) => val != password ? 'Password \'t match' : null,
          ),
          SizedBox(height: 20.0),
          RaisedButton(
            color: Colors.pink[400],
            child: Text(
              'Register',
              style: TextStyle(color: Colors.white),
            ),
            onPressed: () async {
              if(_formKey.currentState.validate()){
                setState(() => loading = true);
                dynamic result = await _auth.registerWithEmailAndPassword(email, password);
                if(result == null) {
                  setState(() {
                    loading = false;
                    error = 'Please supply a valid email';
                  });
                }
              }
            }
          ),
          SizedBox(height: 12.0),
          Text(
            error,
            style: TextStyle(color: Colors.red, fontSize: 14.0),
          )
         ],
       ),
     ),
   ),
 );
}
}
2个回答

3

首先,该列接收无界限高度。这意味着它不知道在其主轴上有多大,也不知道在哪里渲染其子元素。

如果您不想为其父容器设置大小,可以使用属性 mainAxisSize: MainAxisSize.min

此属性告诉您的列采用所需的最小空间,因此,您传递的约束并不那么重要。

其次,由于这是一个 Form,您需要将容器包装到 SingleChildScrollView 中,以避免键盘隐藏您的 TextFormField

希望这解决了您的问题!


2
只需将您的列包装在SingleChildScrollView中,这样当键盘出现时,您也可以滚动。
 child: Form(
      key: _formKey,
      child: SingleChildScrollView( //added widget
          child: Column(
              children: <Widget>[
                  SizedBox(height: 20.0),  

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接