如何在Flutter中实现一个文本居中、另一个文本居底的布局？

实现思路 #

借助Flutter的Column布局组件，通过空间分配达成需求：让中间文本占据页面除底部文本外的所有空间，自然实现垂直居中；底部文本直接固定在页面底部。

完整代码示例 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            // 占据剩余空间，让内部文本垂直居中
            const Expanded(
              child: Center(
                child: Text('页面中间的文本', style: TextStyle(fontSize: 22)),
              ),
            ),
            // 底部文本，添加内边距避免贴边
            Padding(
              padding: const EdgeInsets.fromLTRB(0, 0, 0, 16),
              child: Text('页面底部的文本', style: TextStyle(fontSize: 18, color: Colors.grey[700])),
            ),
          ],
        ),
      ),
    );
  }
}

可选替代方案 #

用Spacer替换Expanded，代码更简洁：

// 替换后的Column子组件
children: [
  const Spacer(),
  const Center(child: Text('中间文本')),
  Padding(
    padding: const EdgeInsets.only(bottom: 16),
    child: Text('底部文本'),
  ),
]

如果需要底部文本和中间文本之间保留空隙，可以在底部文本上方再加一个const Spacer()。

注意事项 #

• 若页面存在键盘弹出场景，可通过Scaffold的resizeToAvoidBottomInset属性控制布局是否随键盘上移，避免底部文本被遮挡
• 可根据需求调整Padding的数值，控制底部文本与屏幕边缘的距离

内容的提问来源于stack exchange，提问作者Mr.Robot