为什么我应该使用 [Expanded] / [Flexible] flex 而不是 [Align] 对齐？答案

【问题标题】：Why should I use [Expanded] / [Flexible] flex over [Align] alignment?为什么我应该使用 [Expanded] / [Flexible] flex 而不是 [Align] 对齐？
【发布时间】：2019-08-29 00:48:47
【问题描述】：

我一直想知道为什么要使用[Expanded] / [Flexible] flex 而不是[Align] 对齐？您可以使用 [Align] 精确对齐您的小部件，甚至可以避免 [Padding]。

换个角度来看，使用[Expanded] / [Flexible]的flex是不是比[Align]更高效更快？

【问题讨论】：

标签： user-interface dart flutter alignment

【解决方案1】：

不确定您指的是什么。 Expanded 用于（或多或少）“选择”Row/Column 内的哪个小部件应填充剩余空间。而Align 只是将孩子定位在给定的对齐位置。

【讨论】：

比如我要对齐东西就得用Expanded + Align，否则不影响。我想知道这是否比 Expanded (flex) + Padding 更好？
这越来越令人困惑..你能显示示例代码吗？不确定“它不影响”是什么意思。在Row/Column 中包含Expanded 应该总是有效果
我的意思是我不能在 Column 小部件中单独使用 Align 小部件，因为除非我将 Expanded 小部件包裹在它周围，否则什么都不会发生。有什么理由吗？
确定是这样.. 如果你有一个 Column 和 crossAxisAlignment = CrossAxisAlignment.stretch 并且你有一个 Align(child: Text('blubb')) 它将水平居中你的'blubb ' 文本小部件。
您显然不能在Column 中垂直地Align 您的小部件，因为Align 的可用空间不会超过它的子小部件的大小......这就是Expanded为了。增长以填补可用空间。

【解决方案2】：

Expanded/Flex 和 Align 之间没有可比性。看看下面的sn-p。

 Column(
  children: [
    Container(color: Colors.blue, height: 200),
    Align(child: Container(color: Colors.green)), // doesn't show anything
    Expanded(child: Container(color: Colors.orange)), // shows up in the remaining space
  ],
);

将Align 作为Container 的父级不会在屏幕上显示任何内容，但如果您使用Expanded/Flex，它将占用左侧空间。

【讨论】：

@TheUniqueProgrammer 是的，它会显示，我只是想通过一个例子来展示这两个小部件之间的差异 OP。
好吧，它没有显示差异，因为@TheUniqueProgrammer 表明使用 Expanded + Align 时它是相同的。