Flutter布局需求：首容器顶部对齐，其余容器自动居中

需求很明确：第一个容器固定在页面顶部，另外两个容器无论屏幕尺寸如何，始终保持在屏幕垂直居中的位置。

你当前的代码里用固定高度的SizedBox(height: 100)来隔开顶部容器和中间容器，这种方式没法适配不同尺寸的屏幕，导致Test2和Test3不能真正做到全局居中。下面是修改后的实现方案：

核心思路是将页面主体分成顶部区域和中间居中区域，用Expanded让中间区域占据剩余的全部空间，再在这个区域内部让两个容器垂直居中。

修改后的完整代码 #

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0.0,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(right: 60.0),
              child: Image.asset(
                'assets/logo.png',
                height: 20,
              ),
            ),
            SizedBox(width: 8),
            Text(
              '',
              style: TextStyle(
                color: Colors.black,
                fontSize: 20,
              ),
            ),
          ],
        ),
        centerTitle: true,
      ),
      body: Column(
        mainAxisSize: MainAxisSize.max, // 让Column占据整个屏幕高度
        children: [
          // 顶部容器：默认对齐顶部，无需额外Align
          Container(
            margin: EdgeInsets.all(20),
            color: Colors.amber,
            child: const Text(
              'Test1',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 60,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          // 用Expanded占据剩余所有空间，内部让内容居中
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center, // 垂直居中
              children: [
                Container(
                  color: Colors.blue,
                  child: const Text(
                    'Test2',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 60,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                SizedBox(height: 8),
                Container(
                  color: Colors.red,
                  child: const Text(
                    'Test3',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 60,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

关键改动说明 #

• 移除了原代码中固定高度的SizedBox(height: 100)，改用Expanded组件包裹中间的两个容器
• Expanded会自动填充AppBar和顶部容器之外的所有剩余空间，确保中间区域的布局不受屏幕尺寸影响
• 中间区域的Column设置mainAxisAlignment: MainAxisAlignment.center，让Test2和Test3垂直居中于剩余空间内
• 顶部容器无需额外的Align组件，因为外层Column默认mainAxisAlignment: MainAxisAlignment.start，自然会对齐顶部

这样修改后，不管屏幕是手机还是平板，Test2和Test3都会始终保持在屏幕垂直居中的位置，同时Test1固定在页面顶部。

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