在 Flutter 中管理分组列表视图来自 Firestore 的数据

问题描述

我正在尝试使用此包 (grouped list) 对小部件进行分组，但没有成功。

小部件由流构建器创建，来自两个不同的集合，最终出现在一个列表视图中。我想通过一个组（字符串）将它们分组，如您所见，列表视图中的每个小部件都有自己的组标题（每次在 Firestore 中插入组的值）。

我想将所有具有相同组的小部件分组在一个标题下。

Screenshot of my situation

Screenshot of what am I trying to achieve

列表和分组列表视图：

 List<Widget> items = [
            ...(prospettive
                .map((prospettiveId) =>
                    ProspettiveItem(prospettiveId: prospettiveId))
                .toList()),...(avvenimenti
                .map((avvenimentoId) =>
                    AvvenimentoItem(avvenimentoId: avvenimentoId))
                .toList()),];
          //some code
          Expanded(
                    child: GroupedListView(
                      elements: items,groupBy: //Here is where I'm stuck,),

如您所见，StreamBuilder构建的widget有两个“AvvenimentoItem”和“ProspettiveItem”，它们实际上是相同的，只有一个措辞变化。 下面我添加了我如何为两者构建标题。

您在小部件顶部看到的标题：

class AvvenimentoItem extends StatelessWidget {
  final Avvenimento avvenimentoId;

  const AvvenimentoItem({Key key,this.avvenimentoId}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return //somecode
                          Row(
                            children: [
                              OutlinedDotIndicator(
                                size: 12,borderWidth: 1,color: Colors.black54,Padding(
                                padding: const EdgeInsets.only(left: 8),child: Text(
                                  avvenimentoId.dataAggiornamento ?? '',//Here is where I add the String from firestore with the group name
                                  style: TextStyle(
                                    fontSize: 16,color: Colors.black,fontWeight: FontWeight.w500,],//the rest of the widget

如何将这些小部件分组？

解决方法

groupBy: (element) => element.dataAggiornamento 

试试这个。您必须传递元素值才能对列表进行分组。