Flutter如何在Column中添加ListView.separated并解决hasSize布局报错

问题原因 #

你的报错是嵌套Column的高度约束不明确导致的：

• 你在HomePage的顶层Column中直接放置了AdvertisementTile组件，没有给它加任何高度约束
• AdvertisementTile内部又嵌套了Column + Expanded的结构，Expanded需要在有明确高度约束的Flex父容器中才能计算自身尺寸，父容器高度无界时就会触发hasSize渲染报错。

修复方案 #

第一步：给HomePage里的AdvertisementTile套Expanded

修改HomePage中FutureBuilder的返回逻辑，让AdvertisementTile占用顶层Column剩余的所有可用高度：

FutureBuilder<AdvertisementList>(
  future: _listOfItems,
  builder: (context, snapshot) {
    if (!snapshot.hasData) {
      return const Center(child: CircularProgressIndicator());
    } else {
      // 新增Expanded包裹
      return Expanded(
        child: AdvertisementTile(advertisements: snapshot.data!),
      );
    }
  },
)

第二步：简化AdvertisementTile结构，新增底部加载指示器

你不需要额外嵌套Column来放加载更多的CircularProgressIndicator，直接调整ListView.separated的item逻辑即可，同时删除多余的嵌套结构：

@override
Widget build(BuildContext context) {
  return NotificationListener(
    onNotification: onNotification,
    child: ListView.separated(
      padding: EdgeInsets.zero,
      scrollDirection: Axis.vertical,
      controller: scrollController,
      // 总长度 = 广告条目数 + 1（加载指示器占位）
      itemCount: advertisements.length + 1,
      physics: const AlwaysScrollableScrollPhysics(),
      itemBuilder: (_, index) {
        // 最后一个条目展示加载状态
        if (index == advertisements.length) {
          return _loading 
              ? const Padding(
                  padding: EdgeInsets.symmetric(vertical: 16),
                  child: Center(child: CircularProgressIndicator()),
                )
              : const SizedBox.shrink();
        }
        return AdvertisementCard(data: advertisements[index]);
      },
      separatorBuilder: (BuildContext context, int index) {
        // 最后一个条目前不需要分割线
        if (index == advertisements.length - 1) return const SizedBox.shrink();
        return const SizedBox(height: 10);
      },
    ),
  );
}

额外优化建议 #

你当前的Scaffold嵌套了两层，内层的Scaffold完全没必要，直接删除内层Scaffold，把对应的属性配置移到外层即可，减少不必要的组件嵌套。

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