flutter - 在 SingleChildScrollView 内垂直居中小部件

Question

我是 Flutter 的新手，所以我通过制作一个简单的表单来训练自己。当我在 iPhone 上调试时，我意识到虚拟键盘触发了一个错误:“A RenderFlex 在底部溢出了 29 个像素”。我通过将 Container 包装在 SingleChildScrollView 中解决了这个问题。

现在的问题是我的专栏内容不再居中。我不知道为什么......

这是我的代码以帮助您理解:

List<Widget> _buildBody() {
    var listWidget = List<Widget>();

    SingleChildScrollView singleChild = SingleChildScrollView(
        padding: EdgeInsets.only(top: 1.0),
        child: Container(
          alignment: Alignment.center,
          margin: EdgeInsets.all(30.0),
          padding: EdgeInsets.all(10.0),
          child: Form(
            key: _formKey,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 50.0),
                  child: Image.asset(
                    'assets/github.png',
                    width: 100.0,
                    height: 100.0,
                  ),
                ),
                Container(
                    margin: EdgeInsets.only(bottom: 10.0),
                    child: TextFormField(
                        controller: _usernameController,
                        autofocus: true,
                        decoration: InputDecoration(
                            hintText: 'Username',
                            suffixIcon: Icon(Icons.account_circle)))),
                Container(
                  child: TextFormField(
                    controller: _passwordController,
                    obscureText: true,
                    decoration: InputDecoration(
                        hintText: 'Password', suffixIcon: Icon(Icons.vpn_key)),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 10.0),
                  child: RaisedButton(
                    splashColor: Colors.greenAccent,
                    color: Colors.blue,
                    child: Text('Submit'),
                    onPressed: () {
                      _handleSubmit();
                    },
                  ),
                )
              ],
            ),
          ),
        ));

    listWidget.add(singleChild);

    if (_requesting) {
      var modal = new Stack(
        children: [
          new Opacity(
            opacity: 0.3,
            child: const ModalBarrier(dismissible: false, color: Colors.grey),
          ),
          new Center(
            child: new CircularProgressIndicator(),
          ),
        ],
      );
      listWidget.add(modal);
    }

    return listWidget;
  }

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Github Login'),
        ),
        body: Stack(
          children: _buildBody(),
        ));
  }

我将属性“mainAxisAlignment: MainAxisAlignment.center”添加到我的列中。在我将它包装到 SingleChildScrollView 之前，它运行良好。

如果有人可以帮助我并解释为什么它不再起作用，我将不胜感激:)

Answer 1

ArtiomLK在评论中提出了一个对我有帮助的解决方案:

将 SingleChildScrollView 包装在 Center 中。小部件树是:

Center(child: SingleChildScrollView(child: Column(...)))

其他人都没有帮助。