【问题标题】:Difference between Center and Expanded in this case?在这种情况下,中心和扩展之间的区别?
【发布时间】:2018-10-09 16:58:39
【问题描述】:

我想要 AppBar 居中后的所有内容。然而它不是居中的。 这就是我的代码的样子。如果有人能告诉我为什么我当前的代码没有将登录名放在密码项的中心,我将不胜感激。

这就是我当前的布局

这是我的代码

class MyScaffold extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        // Material is a conceptual piece of paper on which the UI appears.
        return new Material(
            // Column is a vertical, linear layout.

            child: new Column(
                    children: <Widget>
                    [
                        new MyAppBar(
                            title: new Text('Example title', style: Theme
                                    .of(context)
                                    .primaryTextTheme
                                    .title),
                            ),

                        new Center(
                            child: new Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                    children: <Widget>[
                                        new Text("Login"),

                                        new TextField(
                                                decoration: new InputDecoration(
                                                        border: new OutlineInputBorder(), hintText: '---')),

                                        new Text("Password"),

                                        new TextField(
                                                decoration: new InputDecoration(
                                                        border: new OutlineInputBorder(), hintText: '---')),

                                    ]),
                            )


                    ]
                    ));
    }
}

我希望它看起来像这样

我知道我可以通过展开来实现这种外观替换中心。为什么这行得通?两者有什么区别。谁能澄清 Expanded 的真正作用?

【问题讨论】:

  • 它在我看来是居中的。
  • 我刚刚更新了帖子。我想登录直到密码小部件垂直居中

标签: dart flutter flutter-layout


【解决方案1】:

使用扩展强制孩子占用可用空间。 Read more here

【讨论】:

  • 不,在这种情况下,appbar 也会移到中心
  • @MistyD 是真的。我没看到。
  • @MistyD 我刚刚修改了我的答案。 Expanded 有效,因为与 Center 不同,它占用了剩余的可用父空间。
  • 这仍然没有回答问题。在那种情况下,如果我将“mainAxisAlignment:MainAxisAlignment.center”添加到我的主列,为什么我会得到这个外观。无论如何感谢您的尝试
猜你喜欢
  • 1970-01-01
  • 2016-07-10
  • 2020-12-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-01-03
  • 2011-02-25
  • 1970-01-01
相关资源
最近更新 更多