Flutter中结合Bloc在ListView顶部加组件出现布局异常问题

错误信息翻译 #

RenderBox未完成布局：RenderRepaintBoundary#875f2 relayoutBoundary=up5 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
断言失败：第2009行第12位：'hasSize'

问题原因 #

这是典型的布局约束冲突，和Bloc无关：Column在垂直方向上不会约束子组件的高度（默认让子组件占据自身所需空间），而ListView默认会尝试占据所有可用垂直空间。当把ListView直接放在Column里时，ListView没有明确的高度限制，Flutter无法计算它的布局尺寸，从而触发断言错误。

解决方案 #

有两种可行的修复方式：

方式1：用Expanded包裹ListView（推荐） #

让ListView占据Column中剩余的垂直空间，性能更优，适合数据量较大的场景：

Column(children: [
  const Text('test test'),
  Expanded(
    child: ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        return CatalogListItem(category: state.categories[index]);
      },
      itemCount: state.categories.length,
    ),
  )
])

方式2：给ListView设置shrinkWrap: true #

让ListView根据子项的总高度自适应尺寸，适合数据量较小的场景（数据量大时可能出现性能问题）：

ListView.builder(
  shrinkWrap: true,
  itemBuilder: (BuildContext context, int index) {
    return CatalogListItem(category: state.categories[index]);
  },
  itemCount: state.categories.length,
)

补充说明 #

你之前不使用Bloc时看似可行，大概率是当时的布局结构或数据量刚好让ListView高度自动适配，但本质问题还是布局约束缺失，和Bloc的状态管理逻辑没有关系。

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