颤振：如何从firebase对象创建带有标题的列表

我在firebase中有一个包含子集合和文档的集合，我希望在列表视图中显示这些数据，每个子集合都有一个标题。以图片为例

在本例中，我有3个子集合（A、B和C组），其中包含一些文档，比如一个包含图像url和描述的文档

如何在颤振中建立mi列表

到目前为止，我成功地将所有5个文档下载到firebase对象列表中，并且我能够构建如下列表

List<DocumentSnapshot> itemDB = [];

class _ItemListNewState extends State<ItemListNew> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      primary: false,
      shrinkWrap: true,
      physics: ClampingScrollPhysics(),
      children: itemDB.map((DocumentSnapshot document) {
        return //a row with an Image and a Text

List itemDB=[]；
类_ItemListNewState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回列表视图(
主要：错误，
收缩膜：对，
物理：ClampingScrollPhysics（），
子项：itemDB.map（（文档快照文档）{
返回//包含图像和文本的行

这很好，但我没有标题。包含标题的最佳方式是什么

---

提前感谢开发人员！！

您可以复制粘贴并运行下面的完整代码
您可以使用软件包
代码片段

GroupedListView<dynamic, String>(
          groupBy: (element) => element['group'],
          elements: _elements,
          sort: true,
          groupSeparatorBuilder: (String value) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: Center(
                child: Text(
              value,
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            )),
          ),
          itemBuilder: (c, element) {
            return Card(
              elevation: 8.0,
              margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
              child: Container(
                child: ListTile(
                  contentPadding:
                      EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
                  leading: Icon(Icons.account_circle),
                  title: Text(element['name']),
                  trailing: Icon(Icons.arrow_forward),
                ),
              ),
            );
          },
        )

GroupedListView(
groupBy:（元素）=>element['group']，
元素：_元素，
排序：对，
groupSeparatorBuilder：（字符串值）=>填充(
填充：常数边集全部（8.0），
儿童：中心(
子：文本(
价值
样式：TextStyle（fontSize:20，fontWeight:fontWeight.bold），
)),
),
itemBuilder：（c，元素）{
回程卡(
标高：8.0，
边距：新边集。对称（水平：10.0，垂直：6.0），
子：容器(
孩子：ListTile(
内容填充：
边缘组。对称（水平：20.0，垂直：10.0），
前导：图标（图标、账户和圆圈），
标题：文本（元素['name']），
尾随：图标（图标向前箭头），
),
),
);
},
)

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:grouped_list/grouped_list.dart';

void main() => runApp(MyApp());

List _elements = [
  {'name': 'John', 'group': 'Team A'},
  {'name': 'Will', 'group': 'Team B'},
  {'name': 'Beth', 'group': 'Team A'},
  {'name': 'Miranda', 'group': 'Team B'},
  {'name': 'Mike', 'group': 'Team C'},
  {'name': 'Danny', 'group': 'Team C'},
];

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Grouped List View Example'),
        ),
        body: GroupedListView<dynamic, String>(
          groupBy: (element) => element['group'],
          elements: _elements,
          sort: true,
          groupSeparatorBuilder: (String value) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: Center(
                child: Text(
              value,
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            )),
          ),
          itemBuilder: (c, element) {
            return Card(
              elevation: 8.0,
              margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
              child: Container(
                child: ListTile(
                  contentPadding:
                      EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
                  leading: Icon(Icons.account_circle),
                  title: Text(element['name']),
                  trailing: Icon(Icons.arrow_forward),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“package:grouped_list/grouped_list.dart”；
void main（）=>runApp（MyApp（））；
列表_元素=[
{'name'：'John'，'group'：'Team A'}，
{'name'：'Will'，'group'：'Team B'}，
{'name'：'Beth'，'group'：'Team A'}，
{'name'：'Miranda'，'group'：'Team B'}，
{'name'：'Mike'，'group'：'Team C'}，
{'name'：'Danny'，'group'：'Team C'}，
];
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
debugShowCheckedModeBanner:false，
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
),
家：脚手架(
appBar:appBar(
标题：文本（“分组列表视图示例”），
),
正文：GroupedListView(
groupBy:（元素）=>element['group']，
元素：_元素，
排序：对，
groupSeparatorBuilder：（字符串值）=>填充(
填充：常数边集全部（8.0），
儿童：中心(
子：文本(
价值
样式：TextStyle（fontSize:20，fontWeight:fontWeight.bold），
)),
),
itemBuilder：（c，元素）{
回程卡(
标高：8.0，
边距：新边集。对称（水平：10.0，垂直：6.0），
子：容器(
孩子：ListTile(
内容填充：
边缘组。对称（水平：20.0，垂直：10.0），
前导：图标（图标、账户和圆圈），
标题：文本（元素['name']），
尾随：图标（图标向前箭头），
),
),
);
},
),
),
);
}
}

非常感谢您的反馈。我怎么会错过这个插件？！今天我将试用firebase文档快照，看看如何使用它。有什么方法可以滚动到列表中的某个位置吗？我已经成功地使用了scrollController.animateTo（800.0，持续时间：持续时间（毫秒：500），曲线：曲线。轻松）；'但是我想滚动到索引而不是位置…滚动到索引需要使用ScrollablePositionedList，您可以看到我的帖子。但是ScrollablePositionedList不提供组。