RenderFlex 溢出 - 颤振

Question

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

我尝试了多种不同的方法来实现这一点，同时仍然使用 ListView.Builder 但是，其中 none 有效。完成此任务的更好方法是什么？

我的代码在这里，在此先感谢您的指导

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),
          )
         ],
       ),
     ),
   ),
 );
}
}

Answer 1

首先，该列的高度不受限制。这意味着它不知道它的主轴有多大，也不知道在哪里渲染它的 children.

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

这属性告诉您的专栏采用所需的最小值 space，因此，您事先通过的限制并不重要。

其次，由于这是 Form，您需要将容器包装成 SingleChildScrollView，以避免键盘隐藏您的 TextFormField

希望这能解决您的问题！

Answer 2

你必须用 SingleChildScrollView 包裹你的列，这样当键盘出现时你也可以滚动。

 child: Form(
      key: _formKey,
      child: SingleChildScrollView( //added widget
          child: Column(
              children: <Widget>[
                  SizedBox(height: 20.0),

RenderFlex 溢出 - 颤振

RenderFlex overflowed - flutter

overflow

dart

flutter