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

Question

我正在尝试使用此包（分组列表）对小部件进行分组，但没有成功。

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

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

我的情况截图

我要实现的目标的屏幕截图

列表和 GroupedListView：

 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 构建的小部件是两个“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

如何对这些小部件进行分组？

Answer 1

groupBy: (element) => element.dataAggiornamento 

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