Flutter使用SingleChildScrollView出现RenderBox未布局报错页面空白

报错原因 #

• 核心冲突是SingleChildScrollView本身为无边界高度容器，内部子元素无法使用Expanded/Flexible这类依赖父容器确定尺寸的弹性布局组件
• 代码中在SingleChildScrollView嵌套的Column内部，给水平滚动的ListView.separated套了Expanded，框架无法计算组件布局尺寸，触发hasSize断言报错，导致页面空白

修复方案 #

直接删除包裹水平ListView的Expanded，给水平ListView指定明确高度即可，修改后的代码如下：

// 替换原有Expanded包裹的ListView代码
SizedBox(
  height: 50, // 与你的item高度保持一致
  child: ListView.separated(
    scrollDirection: Axis.horizontal,
    separatorBuilder: (_, index) => SizedBox(width: 20,),
    itemCount: topics.length,
    itemBuilder: (context, index) {
      return Container(
        height: 50,
        width: 100,
        decoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.circular(15),
          image: DecorationImage(
            image: AssetImage('assets/saved_2.png'),
            fit: BoxFit.fill,
          ),
        ),
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Align(
                alignment: Alignment.bottomLeft,
                child: Text(
                  topics[index].schoolNmae!,
                  style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold),
                ),
              ),
            )
          ],
        ),
      );
    }
  ),
),

注意事项 #

• 所有放在SingleChildScrollView内部的子组件，都需要有明确的宽高约束，禁止使用弹性布局组件
• 如果要在垂直滚动容器内嵌套水平滚动组件，只需要给水平滚动组件设置固定高度即可，不需要额外的弹性约束

内容的提问来源于stack exchange，提问作者Gbenga B Ayannuga