Flutter Column布局内Align包裹的文本无法对齐到目标位置问题求解

你的Align组件无法垂直定位到屏幕底部的核心原因是父布局Column的布局约束限制：

• Column的子控件默认仅能获取刚好满足自身内容的高度，你的Align没有设置固定高度，实际可用高度仅等于内部TextButton的高度，所以alignment属性仅能在这个高度极小的区域内调整水平位置，没有足够的垂直空间实现底部对齐。
• 此外当前Column设置了mainAxisAlignment: MainAxisAlignment.center，所有子元素默认垂直居中排列，也不会将屏幕剩余垂直空间分配给Align组件。

两种常用实现方案可选：

方案1：用Expanded包裹Align #

给Align外层套Expanded，让它自动占满圆形按钮之外的所有剩余垂直空间，此时alignment的底部对齐规则即可正常生效：

body: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    SizedBox.fromSize(
      size: const Size(300, 300),
      child: ClipOval(
        child: Material(
          child: Center(
            child: Text(
              "Start",
              style: GoogleFonts.overpass(
                  textStyle: const TextStyle(
                      fontSize: 30.0, fontWeight: FontWeight.w100)),
            ),
          ),
          color: Colors.amber,
        ),
      ),
    ),
    Expanded(
      child: Align(
        alignment: Alignment.bottomRight,
        child: TextButton(
            onPressed: null,
            child: Text("pow",
                style: GoogleFonts.oxygen(
                    textStyle: const TextStyle(color: Colors.white)))),
      ),
    ),
  ],
)

方案2：改用Stack作为顶层布局 #

将body的根布局替换为Stack，圆形按钮和pow文本都作为Stack的子节点，此时Align可以直接基于整屏空间做定位，灵活性更高，更适合自定义点位需求。

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