Flutter中CustomScrollView的SliverGrid元素无限重复问题求助

核心原因 #

你错误地将非Sliver类型的FutureBuilder直接放入CustomScrollView的slivers列表中。Flutter会自动用SliverToBoxAdapter包裹这个非Sliver组件，但SliverGrid作为Sliver组件被嵌套在SliverToBoxAdapter里时，会破坏CustomScrollView的滚动布局逻辑，导致元素无限重复渲染。

解决步骤 #

1. 调整布局结构，将FutureBuilder移到CustomScrollView外层

把FutureBuilder作为Scaffold的body直接子项，根据异步状态返回完整的CustomScrollView：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text(widget.title)),
    body: FutureBuilder(
      future: europe,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return CustomScrollView(
            slivers: [EuropeGroup(data: snapshot.data!)],
          );
        } else {
          // 加载状态也需要用CustomScrollView包裹Sliver
          return const CustomScrollView(
            slivers: [LoadingSliver()],
          );
        }
      },
    ),
  );
}

2. 验证数据源是否存在重复

确认数据库查询返回的列表本身没有重复数据，在initState中添加日志验证：

@override
void initState() {
  super.initState();
  europe = DatabaseHelper.instance.getDatabaseContent().then((data) {
    print("返回数据长度：${data.length}");
    if (data.isNotEmpty) {
      print("第一条数据：${data[0].geo}");
    }
    return data;
  });
}

如果日志显示数据长度和内容符合预期，说明问题不在数据源；如果数据本身重复，需要检查数据库查询逻辑。

3. 检查SliverGrid的布局配置

确保SliverGridDelegate的参数合理，避免因布局计算错误导致重复渲染，比如显式设置子项宽高比：

SliverGridDelegate gridDelegate = const SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 2,
  childAspectRatio: 1.2, // 根据UI需求调整
);

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