Flutter中如何将Column的子组件对齐至屏幕底部？

嘿，我来帮你排查下问题所在～你当前的代码里，Align组件并没有起到你预期的作用，原因是：在Column中，Align默认只会占据它包裹的子组件所需的空间，而不是填充Column剩余的垂直空间。所以你设置的alignment: Alignment.bottomCenter，只是让BottomAlignedChild在Align自己的小区域里居底，而不是整个屏幕/父容器的底部。

这里有两种简单有效的解决方法：

方法一：使用Spacer组件 #

Spacer会自动填充Column中剩余的所有垂直空间，把后面的组件直接“挤”到底部，代码修改如下：

Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    ChildA(),
    ChildB(),
    Spacer(), // 填充剩余垂直空间，将底部组件推到底部
    BottomAlignedChild()
  ]
)

方法二：用Expanded包裹Align #

让Align占据Column剩余的全部空间，这样它的对齐属性就会相对于整个剩余区域生效，代码示例：

Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    ChildA(),
    ChildB(),
    Expanded(
      child: Align(
        alignment: Alignment.bottomCenter,
        child: BottomAlignedChild()
      ),
    )
  ]
)

两种方法都能达到你想要的效果，你可以根据自己的需求选择～

内容的提问来源于stack exchange，提问作者Mattia C.