Flutter技术问题：如何将忘记密码按钮置于屏幕底部？

我现在有一段Flutter布局代码：

child: Wrap(
  alignment: WrapAlignment.spaceAround,
  children: [
    const SizedBox(height: 16),
    _EmailInput(),
    const SizedBox(height: 8),
    _ForgotPasswordButton()
  ],
),

我希望把其中的**忘记密码按钮（_ForgotPasswordButton()）**置于页面底部，但尝试用Container和Column包裹后没能实现需求，请问该怎么调整？

解决方案 #

要实现这个效果，核心是让父容器占据页面的全部可用垂直空间，再通过布局属性将按钮推到底部。你可以替换掉原来的Wrap，用Column结合以下两种方式实现：

方式一：Column + MainAxisAlignment.spaceBetween

通过设置垂直方向的对齐方式为spaceBetween，让顶部元素组靠上，按钮自动靠下：

child: Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center, // 保持水平居中，对应原Wrap的spaceAround效果
  children: [
    // 顶部元素组
    Column(
      children: [
        const SizedBox(height: 16),
        _EmailInput(),
        const SizedBox(height: 8),
      ],
    ),
    _ForgotPasswordButton(),
  ],
),

注意：必须保证这个Column所在的父组件（比如Scaffold的body）已经占据整个屏幕高度。如果父组件没有铺满高度，可以给Column外层套一个Container并设置height: double.infinity，或者用Expanded包裹Column（当它嵌套在其他布局内时）。

方式二：Column + Spacer

Spacer会自动填充中间的剩余垂直空间，直接把按钮挤到页面底部：

child: Column(
  crossAxisAlignment: CrossAxisAlignment.center, // 保持水平居中
  children: [
    const SizedBox(height: 16),
    _EmailInput(),
    const SizedBox(height: 8),
    const Spacer(), // 填充剩余空间，将按钮推到底部
    _ForgotPasswordButton(),
  ],
),

同样要确保Column能获取到足够的垂直空间，否则Spacer无法生效。

内容的提问来源于stack exchange，提问作者Danyl Marie