如何灵活地只在Column中分配空白空间？答案

【问题标题】：How to make flexible only distribute empty space in Column?如何灵活地只在Column中分配空白空间？
【发布时间】：2021-03-20 20:25:44
【问题描述】：

我有一个有 2 个孩子的专栏。第一个孩子有固定高度，第二个孩子有动态内容。

我希望第一个孩子位于屏幕顶部，第二个孩子位于垂直中间。

所以我添加了一个空的第三个孩子，并使第一个和第三个孩子灵活，以便他们平等地共享垂直空间：

Column(
  children: [
    Flexible(
      child: Column(
        children: [_firstChild()],
      ),
    ),
    _secondChild(),
    Flexible(child: Container()),
  ],
)

这在第二个孩子的内容很短时有效。

但如果第二个孩子长高了，它会夹住第一个孩子：

Flexible 不应该在fit: FlexFit.loose 时只分配空白空间吗？我尝试了两种fit 的可能性。我试图将第一个孩子放在 SizedBox 和 Align 中

我试图让第三个孩子成为Spacer。到目前为止没有任何效果。空的第三个孩子占据了剩余垂直空间的一半。

编辑：

当第二个孩子的高度太大而无法使其垂直居中而不剪裁第一个孩子时，我希望它的行为就像默认的Column 和MainAxisAlignment.start（如第一张图片）

【问题讨论】：

第二种情况你想要什么？ Center 和 Stack 你可以吗？
哦，如果使用Stack 和Center，第二个孩子将与第一个孩子重叠。如果第二个孩子太高，我希望它坐在第一个孩子下面。它不再需要位于中心。
基本上，如果有空间，我希望第二个孩子位于垂直中心，如果没有，我希望它直接位于第一个孩子的下方。
然后看我的回答

标签： flutter flutter-layout

【解决方案1】：

这个呢：

Stack(children:[
  Center(child: SecondChild()),
  Align(alignment: Alignment.topCenter, child: FirstChild()),
])

【讨论】：

嘿，这就是我在评论中回复的内容。如果SecondChild() 太高，它将与FirstChild() 重叠。如果SecondChild() 太高，我希望它表现得像第一张照片。这就是我对两个 Flexible 块的希望。
@alokraop 回答已编辑（交换订单）。这样可以吗？
现在FirstChild() 将与SecondChild() 重叠，我不希望任何内容重叠。如果SecondChild() 太高而不能位于垂直轴的中心，我希望它位于第一个孩子的下方。无法通过堆栈实现。
@alokraop 困惑...你能给出一些你想要的解释或截图吗