如何在Flutter的FirestoreListView中添加固定首位横幅元素？

要在FirestoreListView的列表首位添加固定横幅，你可以利用CustomScrollView结合firebase_ui_firestore提供的sliver版本组件来实现，这样既保留Firestore列表的分页加载特性，又能在顶部插入固定元素：

直接替换原代码为以下结构：

CustomScrollView(
  slivers: [
    // 顶部固定横幅元素
    SliverToBoxAdapter(
      child: Container(
        height: 120,
        padding: const EdgeInsets.all(16),
        color: Colors.lightBlueAccent,
        child: const Text(
          "我的固定横幅",
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
      ),
    ),
    // 原Firestore数据列表，改用SliverFirestoreListView
    SliverFirestoreListView<Map<String, dynamic>>(
      pageSize: 4,
      query: usersQuery,
      itemBuilder: (context, snapshot) {
        Map<String, dynamic> user = snapshot.data();
        return FeedBox(
          imageUrl: user['imageUrl'],
          displayName: user['displayName'],
        );
      },
    ),
  ],
)

说明 #

• SliverToBoxAdapter用于将普通Widget转换为sliver组件，放在CustomScrollView的最前面，作为固定横幅。你可以根据需求替换成自己的横幅Widget。
• SliverFirestoreListView是firebase_ui_firestore提供的sliver版列表组件，功能和FirestoreListView完全一致，但可以嵌入CustomScrollView中，完美兼容分页加载逻辑，不会因为添加顶部元素而影响原有功能。

如果你的场景不适合用sliver组件，也可以尝试用Column包裹横幅和FirestoreListView，给FirestoreListView设置shrinkWrap: true并包裹在Expanded中，但这种方式可能会影响分页加载的流畅性，因此更推荐上面的sliver方案。

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