Flutter中Stack内Column对齐问题：如何实现居中内容加底部固定文本布局

问题原因 #

你代码里的Column组件默认mainAxisSize属性值为MainAxisSize.max，会沿垂直方向撑满父容器的全部高度，所以即使外层套了Align(alignment: Alignment.center)，Column自身高度是全屏的，内部子组件默认从顶部开始排列，就会出现始终位于屏幕顶部的效果。

解决方案 #

给居中的Column添加mainAxisSize: MainAxisSize.min属性，让Column的高度刚好包裹内部的图片和加载动画内容，外层的Align就能正确将这个尺寸适配内容的Column对齐到屏幕中央。

补充：你也可以选择给Column设置mainAxisAlignment: MainAxisAlignment.center实现相同效果，这种方案下Column仍会撑满全屏高度，内部子元素沿垂直方向居中排列。更推荐使用mainAxisSize: MainAxisSize.min的方案，避免占用不必要的布局空间。

修正后完整代码 #

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: const Color(0xFFF9F8FD),
    body: Stack(
      children: [
        Align(
          alignment: Alignment.center,
          child: Column(
            // 新增此行配置
            mainAxisSize: MainAxisSize.min,
            children: [
              Image.asset(
                'assets/test.png',
                height: 100,
                width: 100,
              ),
              SpinKitThreeBounce(
                color: const Color(0xFF0C9869),
                size: 30.0,
              ),
            ],
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: RichText(
            text: const TextSpan(
              text: 'A project by : ',
              style: TextStyle(
                height: 1,
                fontSize: 20,
                fontStyle: FontStyle.italic,
                fontWeight: FontWeight.bold,
                color: Color(0xFF0C9869),
              ),
            ),
          ),
        ),
      ],
    ),
  );
}

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