45

我是 Flutter 的新手,所以我通过制作一个简单的表单来训练自己。当我在 iPhone 上调试时,我意识到虚拟键盘触发了一个错误:"A RenderFlex overflowed by 29 pixels on the bottom". 我通过将 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 之前,它运行良好。

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

4

9 回答 9

93

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

包裹SingleChildScrollView在一个Center. 小部件树是:

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

其他人都没有帮助。

于 2019-07-25T13:43:51.103 回答
38

解决方案:

将您的顶层Stack放在Center小部件中。

body: Center(child: Stack(
      children: _buildBody(),
    )));

调试提示:

用于Flutter Inspector查找布局出错的地方。

我对您的代码进行了一些编辑(以便在我的本地工作),然后我进行了检查。它显示如下

在此处输入图像描述

我们有一个StackSingleChildScrollViewas per 代码(请参阅显示小部件堆栈的图表右侧)。由于大小由SingleChildScrollView(其中的内容)确定,因此Stack只占用很小的空间,默认情况下,它对齐在top. 所以把它放在下面Center,整个 Stack 视图就会出现在中间。

于 2018-11-21T04:00:22.897 回答
14

您可以使用“中心”小部件,如

返回中心(子:SingleChildScrollView())

于 2020-11-04T14:06:02.933 回答
12

官方文档中有一段关于它的内容:

将 SingleChildScrollView 与列一起使用

来源:https ://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

但是我发现使用上述组合效果更好。即限制在Column可能的最小尺寸(MainAxisSize.min)。这应该没问题,因为SingleChildScrollView在滚动之前会在屏幕上占用尽可能多的空间。

Widget _buildPortraitPage() {
    return Center(
      child: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min, // <-- notice 'min' here. Important
          children: [
            Flexible(
              child: Image.asset('assets/images/my-image.png'),
            ),
            Flexible(
              child: Text('My content'),
            ),
          ],
        ),
      ),
    );
  }

Flutter 中的布局引擎很难弄清楚。

于 2019-08-07T12:22:50.103 回答
7

使用 LayoutBuilder 小部件包装所有小部件,并在 Column 内的居中小部件之前和之后使用 Spacer 小部件

    class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('AppBar'),
        ),
        body: LayoutBuilder(builder: (context, constraints) {
          return SingleChildScrollView(
              child: ConstrainedBox(
                  constraints: BoxConstraints(minWidth: constraints.maxWidth, minHeight: constraints.maxHeight),
                  child: IntrinsicHeight(
                    child: Column(
                        mainAxisSize: MainAxisSize.max,
                        children: [
                          Spacer(),
                          Container(
                             child: //your widget
                          ),
                          Spacer()
                        ]
                    ),
                  )
              )
          );
        })
    );
  }
}
于 2020-05-10T04:45:40.337 回答
5

只需ColumnCenter. 我将它用于我的应用程序,它似乎将我的内容集中Column在一个SingleChildScrollView.

于 2018-11-20T18:47:29.837 回答
4

还有另一种方法可以实现这一点:

Center(
    child: ListView(
        shrinkWrap: true,
        children: []
    )

)
于 2019-08-01T08:59:08.010 回答
0

您可以使用 SingleChildScrollView -> ConstrainedBox(最小高度和宽度) -> 中心

于 2021-10-23T08:00:09.050 回答
0

中心包裹SingleChildScrollView

child: Center(
   child: SingleChildScrollView(
      child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         mainAxisSize: MainAxisSize.max,

SingleChildScrollView 居中

于 2022-02-24T00:18:35.320 回答