SingleChildScrollView导致Row内Expanded容器高度受限的解决方案求助

问题场景 #

Row组件内的两个容器均用Expanded包裹：

• 未添加SingleChildScrollView时，容器能占满屏幕高度，但无法滚动
• 添加SingleChildScrollView后，容器高度被压缩至子组件高度，即使设置screenHeight也无效
  需要实现容器满高且支持滚动的效果。

无SingleChildScrollView的代码示例 #

Widget build(BuildContext context) {
  final screenWidth = MediaQuery.sizeOf(context).width;
  final screenHeight = MediaQuery.sizeOf(context).height;

  return Scaffold(
      body: SafeArea(
          child: Center(
    child: Container(
      color: Colors.blue,
      // height: screenHeight,
      child: Row(
        children: [
          Expanded(
            child: Container(
              color: mainLightColor,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image(
                      width: MediaQuery.sizeOf(context).width * 0.22,
                      height: MediaQuery.sizeOf(context).width * 0.22,
                      fit: BoxFit.contain,
                      image: const AssetImage('assets/images/logo.png')),
                ],
              ),
            ),
          ),
          Expanded(
            child: Container(
              color: blackColor,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    width: screenWidth * 0.2,
                    height: 35,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(45),
                      color: mainMediumColor,
                    ),
                    child: Center(
                      child: Text(
                        'Create Account',
                        style: GoogleFonts.poppins(),
                      ),
                    ),
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  Container(
                    width: screenWidth * 0.2,
                    height: 35,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(45),
                      border: Border.all(color: mainMediumColor),
                      color: blackColor,
                    ),
                    child: Center(
                      child: Text(
                        'Log In',
                        style: GoogleFonts.poppins(color: whiteColor),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    ),
  )));
}

效果展示 #

添加SingleChildScrollView的代码示例 #

Widget build(BuildContext context) {
  final screenWidth = MediaQuery.sizeOf(context).width;
  final screenHeight = MediaQuery.sizeOf(context).height;

  return Scaffold(
      body: SafeArea(
          child: Center(
    child: SingleChildScrollView(
      child: Container(
        color: Colors.blue,
        // height: screenHeight,
        child: Row(
          children: [
            Expanded(
              child: Container(
                color: mainLightColor,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image(
                        width: MediaQuery.sizeOf(context).width * 0.22,
                        height: MediaQuery.sizeOf(context).width * 0.22,
                        fit: BoxFit.contain,
                        image: const AssetImage('assets/images/logo.png')),
                  ],
                ),
              ),
            ),
            Expanded(
              child: Container(
                color: blackColor,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      width: screenWidth * 0.2,
                      height: 35,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(45),
                        color: mainMediumColor,
                      ),
                      child: Center(
                        child: Text(
                          'Create Account',
                          style: GoogleFonts.poppins(),
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    Container(
                      width: screenWidth * 0.2,
                      height: 35,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(45),
                        border: Border.all(color: mainMediumColor),
                        color: blackColor,
                      ),
                      child: Center(
                        child: Text(
                          'Log In',
                          style: GoogleFonts.poppins(color: whiteColor),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  )));
}

效果展示 #

解决方案 #

问题核心是SingleChildScrollView会让子组件尽可能缩小，Row的高度依赖子组件，因此需要给Row所在容器明确高度约束，同时让SingleChildScrollView的父级提供足够空间。

方案1：用LayoutBuilder获取父级约束（推荐） #

将SingleChildScrollView的父级Center替换为LayoutBuilder，给内部Container设置minHeight: constraints.maxHeight，确保容器至少占满可用高度：

Widget build(BuildContext context) {
  final screenWidth = MediaQuery.sizeOf(context).width;

  return Scaffold(
    body: SafeArea(
      child: LayoutBuilder(
        builder: (context, constraints) {
          return SingleChildScrollView(
            child: Container(
              color: Colors.blue,
              minHeight: constraints.maxHeight, // 关键：设置最小高度为父级可用高度
              child: Row(
                children: [
                  Expanded(
                    child: Container(
                      color: mainLightColor,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Image(
                              width: MediaQuery.sizeOf(context).width * 0.22,
                              height: MediaQuery.sizeOf(context).width * 0.22,
                              fit: BoxFit.contain,
                              image: const AssetImage('assets/images/logo.png')),
                          // 添加测试内容验证滚动
                          ...List.generate(20, (index) => Padding(
                            padding: const EdgeInsets.symmetric(vertical: 8.0),
                            child: Text('左侧测试行 $index'),
                          )),
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      color: blackColor,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Container(
                            width: screenWidth * 0.2,
                            height: 35,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(45),
                              color: mainMediumColor,
                            ),
                            child: Center(
                              child: Text(
                                'Create Account',
                                style: GoogleFonts.poppins(),
                              ),
                            ),
                          ),
                          const SizedBox(height: 20),
                          Container(
                            width: screenWidth * 0.2,
                            height: 35,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(45),
                              border: Border.all(color: mainMediumColor),
                              color: blackColor,
                            ),
                            child: Center(
                              child: Text(
                                'Log In',
                                style: GoogleFonts.poppins(color: whiteColor),
                              ),
                            ),
                          ),
                          // 添加测试内容验证滚动
                          ...List.generate(20, (index) => Padding(
                            padding: const EdgeInsets.symmetric(vertical: 8.0),
                            child: Text('右侧测试行 $index', style: TextStyle(color: whiteColor)),
                          )),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    ),
  );
}

方案2：结合MediaQuery设置固定高度 #

如果需要容器严格占满屏幕可用高度，可直接用MediaQuery计算高度（需减去SafeArea的内边距）：

Widget build(BuildContext context) {
  final screenWidth = MediaQuery.sizeOf(context).width;
  final screenHeight = MediaQuery.sizeOf(context).height - 
      MediaQuery.paddingOf(context).top - 
      MediaQuery.paddingOf(context).bottom;

  return Scaffold(
    body: SafeArea(
      child: SingleChildScrollView(
        physics: const AlwaysScrollableScrollPhysics(), // 可选：内容不足时仍允许滚动
        child: Container(
          color: Colors.blue,
          height: screenHeight, // 设置高度为屏幕可用高度
          child: Row(
            children: [
              // 原有Expanded容器内容
            ],
          ),
        ),
      ),
    ),
  );
}

关键原理 #

• SingleChildScrollView本身不会给子组件提供固定高度约束，需手动给容器设置最小高度或固定高度，确保其占满屏幕
• Expanded在Row中会平分宽度，但高度需要父容器提供明确约束才能撑满

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