RenderFlex 溢出 - flutter

Question

嗨，我是 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),
          )
         ],
       ),
     ),
   ),
 );
}
}

Answer 1

首先，該列的高度不受限制。 這意味着它不知道它的主軸有多大，也不知道在哪里渲染它的孩子。

如果不想為其父容器設置大小，可以使用屬性mainAxisSize: MainAxisSize.min 。

此屬性告訴您的列占用所需的最小空間，因此，您事先傳遞的約束並不重要。

其次，由於這是一個Form ，您需要將容器包裝到SingleChildScrollView中，以避免鍵盤隱藏您的TextFormField

我希望這能解決你的問題！

Answer 2

你必須用 SingleChildScrollView 包裹你的列，所以當鍵盤出現時你也可以滾動。

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