Flutter如何让SingleChildScrollView内第二行在屏幕可用空间居中？

要实现你需要的效果，核心是让Column在内容不足时撑满屏幕可用空间，同时避免Expanded引发的无限滚动，具体方案如下：

实现步骤 #

• 用LayoutBuilder获取当前SafeArea内的可用高度，它能准确拿到扣除AppBar、状态栏后的实际可用空间。
• 给Column所在的Container设置minHeight为这个可用高度，保证内容不够时撑满屏幕。
• Column设置mainAxisSize: MainAxisSize.min，让内容过多时自动扩展高度，支持滚动。
• 对第二行内容用Expanded包裹，内部配合Center实现剩余空间内的居中。

修改后的完整代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Testing'),
        ),
        body: SafeArea(
          child: LayoutBuilder(
            builder: (context, constraints) {
              return SingleChildScrollView(
                child: Container(
                  color: Colors.grey,
                  // 设置最小高度为当前可用空间，确保内容不足时撑满屏幕
                  constraints: BoxConstraints(
                    minHeight: constraints.maxHeight,
                  ),
                  child: Column(
                    // 内容过多时自动扩展高度，支持滚动
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Container(
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.red),
                        ),
                        child: Text('First row'),
                      ),
                      // 占据第一行之外的剩余空间，内部Center实现居中
                      Expanded(
                        child: Center(
                          child: Container(
                            decoration: BoxDecoration(
                              border: Border.all(color: Colors.red),
                            ),
                            child: Text('Second row'),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

原理说明 #

• LayoutBuilder的constraints.maxHeight是当前页面实际可使用的高度，比直接用MediaQuery更准确，因为它自动适配了SafeArea和AppBar的占用空间。
• 给Container设置minHeight后，当Column内容总高度小于屏幕高度时，会强制撑满屏幕，此时Expanded可以正常分配剩余空间；当内容超过屏幕高度时，Column会自动扩展高度，SingleChildScrollView就能正常滚动，不会触发无限高度的问题。

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