如何在Flutter中将一个小部件对齐到屏幕顶部并将另一个小部件居中对齐到屏幕中间？

Question

在同一个页面中，我试图将一个小部件置于屏幕顶部，而另一个小部件则居中。但这证明是很困难的。

以下是我的代码：

body: Column(children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              color: Colors.redAccent,
              width: screenWidth,
              height: 50.0,
              child: Center(
                child: Text(
                  "Hello World!",
                  style: TextStyle(
                    fontSize: 18.0,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.blueAccent,
              width: screenWidth,
              height: 50.0,
              child: Center(
                child: Text(
                  "Thanks for the help!",
                  style: TextStyle(
                    fontSize: 18.0,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ],
        ),
      ]),

当在我的Xcode模拟器中运行此代码时，结果如下: https://i.imgur.com/JtPKyq0.png 所以明确一下，这个结果是错误的，因为我想要蓝色容器位于屏幕的中央，而不是顶部。

非常感谢您的帮助！

- hello_friend

---

它应该居中于左侧空间、红色容器和底部之间，还是居中于整个空间、状态栏和底部之间？ - George

@George 我正在尝试将它居中对齐到红色容器和底部之间的空白处。 - hello_friend

你尝试过 Stack Widget 吗？我觉得那可能是你需要的。还有其他的方法，比如 Positioned Widget。 - Archie G. Quiñones

Answer 1

一种选择是使用 Expanded 组件。该组件将扩展以填充父级中的所有可用空间，然后在其中心放置子级。请注意，这仅适用于像 Row ， Column 等Flex组件内部。

在您的情况下，我还建议删除用于行宽的 screenWidth 变量，并使用 Expanded 组件使容器在水平方向上填充屏幕。

这是最终代码：

body: Column(children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Expanded( //makes the red row full width
          child: Container(
            color: Colors.redAccent,
            height: 50.0,
            child: Center(
              child: Text(
                "Hello World!",
                style: TextStyle(
                  fontSize: 18.0,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ],
    ),
    // This expands the row element vertically because it's inside a column
    Expanded( 
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          // This makes the blue container full width.
          Expanded(
            child: Container(
              color: Colors.blueAccent,
              height: 50.0,
              child: Center(
                child: Text(
                  "Thanks for the help!",
                  style: TextStyle(
                    fontSize: 18.0,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  ]
),

- George

---

ListView不是Flex小部件。 - anmol.majhail

的确，我已经删除了对 ListView 的引用。 - George