如何实现含两个嵌套LayoutBuilder的Expanded的Row垂直滚动？

针对你遇到的Row+Expanded布局在窗口高度变化时的溢出与滚动问题，以下是可行的解决方案：

核心思路 #

通过LayoutBuilder获取视口可用高度，给SingleChildScrollView的子元素设置最小高度以撑满屏幕，同时保证内容超出时可滚动；配合CrossAxisAlignment.stretch让左右栏背景铺满视口高度。

修正后的代码 #

return SafeArea(
  child: Scaffold(
    body: LayoutBuilder(
      builder: (context, constraints) {
        return SingleChildScrollView(
          child: Container(
            // 确保容器至少占满视口高度
            minHeight: constraints.maxHeight,
            child: Row(
              // 让左右栏撑满容器高度
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Expanded(
                  child: LayoutBuilder(
                    // 内部可以正常使用LayoutBuilder
                    builder: (context, innerConstraints) {
                      return Container(
                        decoration: const BoxDecoration(
                          color: Color.fromARGB(255, 216, 244, 241),
                        ),
                        child: const Padding(
                          padding: EdgeInsets.symmetric(vertical: 40),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Padding(
                                padding: EdgeInsets.only(top: 5),
                                child: FlutterLogo(
                                  size: 200,
                                ),
                              ),
                            ],
                          ),
                        ),
                      );
                    },
                  ),
                ),
                Expanded(
                  child: LayoutBuilder(
                    builder: (context, innerConstraints) {
                      return Container(
                        decoration: const BoxDecoration(
                          color: Colors.black,
                        ),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Container(
                              width: MediaQuery.of(context).size.width * 0.3,
                              height: 45,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(45),
                                border: Border.all(color: Colors.grey),
                                color: Colors.black,
                              ),
                              child: Center(
                                child: FittedBox(
                                  fit: BoxFit.scaleDown,
                                  child: Text(
                                    'Log In',
                                    style: TextStyle(
                                        fontSize: 17, color: Colors.white),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        );
      },
    ),
  ),
);

关键调整说明 #

1. LayoutBuilder 外层包裹：获取当前视口的最大可用高度，确保容器能撑满屏幕。
2. Container 设置 minHeight：让Row的高度至少等于视口高度，解决SingleChildScrollView自适应高度导致无法铺满屏幕的问题。
3. Row 设置 crossAxisAlignment: CrossAxisAlignment.stretch：强制左右两个Expanded组件撑满Row的高度，让背景色铺满整个视口。
4. 内部 LayoutBuilder 正常工作：Expanded会给子组件传递明确的宽高约束，因此内部的LayoutBuilder可以正常获取约束并渲染UI。

效果验证 #

• 当窗口高度足够时，左右栏背景铺满屏幕，内容垂直居中。
• 当窗口高度缩小到内容无法完全显示时，SingleChildScrollView会自动启用垂直滚动，避免UI溢出。

内容的提问来源于stack exchange，提问作者Muhammad fahad azam