Flutter中如何将ListView内的所有Widget对齐到屏幕中心

ListView 组件默认会占据父容器的全部可用高度，即便外层嵌套 Center，内部子元素依然会默认从 ListView 顶部开始排列，所以无法实现整体居中效果。

分两种常见使用场景选择适配方案：

• 场景1：页面内容无需滚动（适用于大部分正常尺寸设备的登录页）
  直接将 ListView 替换为 Column 组件即可，外层 Center 会直接让 Column 整体居中。
• 场景2：需要保留滚动能力（适配小屏设备、软键盘弹出时的滚动需求）
  给 ListView 添加两个配置参数：
  • shrinkWrap: true：让 ListView 的高度仅包裹自身子元素的总高度，而非撑满父容器
  • physics: const AlwaysScrollableScrollPhysics()：保证滚动能力正常生效

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _State();
}

class _State extends State<LoginPage> {
  TextEditingController nameController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: ListView(
            // 新增核心配置实现居中
            shrinkWrap: true,
            physics: const AlwaysScrollableScrollPhysics(),
            children: <Widget>[
              Container(
                padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
                // 新增alignment让标题水平居中
                alignment: Alignment.center,
                child: Text(
                  'ABC',
                  style: TextStyle(
                      color: Colors.red,
                      fontWeight: FontWeight.w500,
                      fontSize: 30),
                ),
              ),
              Container(
                padding: EdgeInsets.fromLTRB(10, 0, 10, 10),
                child: TextField(
                  controller: nameController,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'User Name',
                  ),
                ),
              ),
              Container(
                padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
                child: TextField(
                  obscureText: true,
                  controller: passwordController,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Password',
                  ),
                ),
              ),
              SizedBox(
                height: 8.0,
                child: Card(child: Center(child: Text('sheraspace'))),
              ),
              Container(
                  height: 50,
                  padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                  child: ElevatedButton(
                    child: Text('Submit'),
                    onPressed: () {
                      print(nameController.text);
                      print(passwordController.text);
                    },
                  )),
            ],
          ),
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Maahdi.Codes