Flutter使用SingleChildScrollView解决底部溢出时屏幕空白怎么办

• 你直接给根节点Column包裹SingleChildScrollView时，SingleChildScrollView自身是纵向无边界高度的容器，而你代码中使用了Expanded组件，Expanded必须在有明确高度约束的父容器中才能计算分配到的高度，无约束状态下Expanded会尝试占用无限高度，导致组件无法正常渲染，最终显示空白。
• 最初的底部溢出问题，是因为白色圆角容器内部的卡片布局总高度超出了Expanded分配给该容器的可用高度，超出部分就会触发溢出提示。

不要修改根布局的结构，只需要给白色圆角容器内部的内容区域包裹SingleChildScrollView即可，修改后的核心代码片段如下：

Expanded(
  child: Container(
    width: double.infinity,
    padding: EdgeInsets.symmetric(horizontal: 20.0),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(35.0),
        topRight: Radius.circular(35.0),
      ),
    ),
    // 给内部的Column包裹SingleChildScrollView即可
    child: SingleChildScrollView(
      // 可按需配置滚动效果，比如iOS风格的回弹效果
      physics: const BouncingScrollPhysics(),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 原有子组件完全保留不动
          SizedBox(
            height: 30.0,
          ),
          Text(
            'All Rooms',
            style: GoogleFonts.mPlusRounded1c(
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
                color: Colors.blue[900]),
          ),
          SizedBox(
            height: 20.0,
          ),
          // 原有卡片布局代码全部不变
          ...
        ],
      ),
    ),
  ),
),

这样修改后，SingleChildScrollView的高度由外层Expanded明确约束，内部内容超出高度时会自动滚动，既不会出现空白，也彻底解决了底部溢出的问题。

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