Flutter中如何让Column底部对齐子组件，其余子组件居中？

要让图片和"Sample Text"保持屏幕中央，同时将"2022"固定在屏幕底部，你需要调整Column的布局结构，确保它占满整个屏幕高度，再通过Expanded分配空间来实现需求。

修改后的完整代码 #

class SplashScreen extends StatelessWidget {
  const SplashScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Globalcolors.mainColor,
      body: Container(
        padding: const EdgeInsets.all(10),
        child: Column(
          // 让Column占满整个屏幕高度
          mainAxisSize: MainAxisSize.max,
          children: [
            // 用Expanded包裹中间内容区域，自动撑开剩余空间，将底部文本挤至屏幕底部
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    'assets/images/splash_logo.png',
                    color: Colors.white,
                  ),
                  const Padding(
                    padding: EdgeInsets.all(50),
                    child: Text(
                      'Sample Text',
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 36,
                          fontFamily: 'MouseMemoirs'),
                    ),
                  ),
                ],
              ),
            ),
            // 底部年份文本，自动对齐屏幕底部
            const Text(
              '2022',
              style: TextStyle(color: Colors.white, fontSize: 12),
            ),
          ],
        ),
      ),
    );
  }
}

你之前尝试无效的原因 #

• 原代码中的Column未设置mainAxisSize: MainAxisSize.max，导致Column仅占用内容自身高度，而非整个屏幕高度，Expanded无法发挥空间分配作用。
• 你将Expanded直接包裹在底部文本外，但原Column是mainAxisAlignment: MainAxisAlignment.center布局，这种情况下Expanded只能让文本在自身小范围内对齐，无法触达屏幕底部。

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