颤振将列拉伸到全屏高度答案

【问题标题】：Flutter stretch columns to full screen height颤振将列拉伸到全屏高度
【发布时间】：2019-12-03 19:44:43
【问题描述】：

所有三个元素都在屏幕顶部并拉伸以填充宽度，但我希望它们拉伸以从上到下垂直填充屏幕。

我尝试在所有内容周围添加Row，但它会引发错误RenderFlex children have non-zero flex but incoming width constraints are unbounded?所以我尝试将 Row 包装在一个 Expanded 小部件中，这会引发错误“扩展的小部件必须放在 Flex 小部件中”。

return Scaffold(
  backgroundColor: Color(0xFF222222),
  body: Column(
  children: <Widget>[
    SizedBox(height: 20),
    Row(
      // crossAxisAlignment: CrossAxisAlignment.stretch,//throws error
      children: <Widget>[
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                color: Colors.red,
                child: Text('Left', textAlign: TextAlign.center),
              ),
            ],
          ),
        ),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                color: Colors.red,
                child: Text('Right', textAlign: TextAlign.center),
              ),
            ],
          ),
        ),
      ],
    ),
    Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Container(
          color: Colors.red,
          child: Text('Bottom', textAlign: TextAlign.center),
        ),
      ],
    ),
  ],
),
);

【问题讨论】：

标签： flutter dart alignment

【解决方案1】：

这更像你所追求的吗？

每个容器都包含一个列，允许您添加多个小部件。

return Scaffold(
      backgroundColor: Color(0xFF222222),
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Expanded(
                    child: Container(
                      color: Colors.red,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          Text('Left', textAlign: TextAlign.center),
                          Text('Left', textAlign: TextAlign.center),
                          Text('Left', textAlign: TextAlign.center),
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      color: Colors.green,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          Text('Right', textAlign: TextAlign.center),
                          Text('Right', textAlign: TextAlign.center),
                          Text('Right', textAlign: TextAlign.center),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.blue,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('Bottom', textAlign: TextAlign.center),
                    Text('Bottom', textAlign: TextAlign.center),
                    Text('Bottom', textAlign: TextAlign.center),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );

【讨论】：

哦，是的，看起来不错。我会测试一下并回复你。

【解决方案2】：

以下是均匀分布容器的方法（水平和垂直）：

return Scaffold(
  backgroundColor: Color(0xFF222222),
  body: Column(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      Expanded(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              child: Container(
                color: Colors.red,
                child: Text('Left', textAlign: TextAlign.center),
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.green,
                child: Text('Right', textAlign: TextAlign.center),
              ),
            ),
          ],
        ),
      ),
      Expanded(
        child: Container(
          color: Colors.blue,
          child: Text('Bottom', textAlign: TextAlign.center),
        ),
      ),
    ],
  ),
);

结果：

【讨论】：

看起来不错，但容器中的文本需要像我的原始代码一样在列中。所以每个盒子可以包含多个元素。
这是对的，只需要稍作调整。与其说 Text 小部件是 Container 的孩子，不如说孩子是一个 Column。只需将以下参数添加到 Column mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
另外，您可以使用 ListView 而不是 Column 来避免内容溢出警告

【解决方案3】：

为了让列占据显示器的整个宽度并平均共享高度，我执行了以下操作：

return MaterialApp(
  home: Scaffold(
    backgroundColor: Colors.black,
    body: SafeArea(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: SizedBox(
              width: double.infinity,
              child: FlatButton(
                onPressed: () {
                  playSound(1);
                },
                color: Colors.blue,
              ),
            ),
          ),

Expanded 小部件将共享高度，而 SizedBox 小部件将占据整个宽度，宽度设置为 double.infinity。

【讨论】：

【解决方案4】：

最终编辑版本 4：

这应该适用于列

     return Scaffold(
      backgroundColor: Color(0xFF222222),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          SizedBox(height: 20),
          Expanded(
            child: Row(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Expanded(
                        child: Container(
                          color: Colors.red,
                          child: Text('Left', textAlign: TextAlign.center),
                        ),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Expanded(
                        child: Container(
                          color: Colors.red,
                          child: Text('Right', textAlign: TextAlign.center),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
           Expanded(
            child: Column(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Expanded(
                  child: Container(
                    color: Colors.green,
                    child: Text('Bottom', textAlign: TextAlign.center),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );

【讨论】：

您正在使用调用来获取高度？当然这不是这样做的方法，它应该能够像使用crossAxisAlignment: CrossAxisAlignment.stretch 对列中的宽度一样进行拉伸以填充屏幕。我敢肯定，它根本不需要任何 height 参数。
好吧，现在看起来好多了，我以为你到处都在使用 MediaQuery。但是你已经把Columns 变成了containers？他们需要是Columns。
有趣的事情..如果您将外部 Column 包装在 Container 中，则根本不需要调用高度..
你的意思是用Expanded包装的Containers包装？
是的，我还在为此苦苦挣扎。 Flutter 是这类事情的噩梦。如果它像 CSS 一样工作就好了。

【解决方案5】：

这可能无法直接回答您的问题

Column，默认情况下拉伸到全高（可以使用size: MainAxisSize.min 更改），所以也许你说的是拉伸它的孩子的高度。为此，您应该使用Expanded。

Column(
  children: <Widget>[
    ChildWidget1(),
    Expanded( // <-- Use Expanded with SizedBox.expand
      child: SizedBox.expand(
        child: ChildWidget2(),
      ),
    ),
  ],
)

【讨论】：