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),

RenderFlex溢出-颤振

2 个答案: