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

【问题标题】：Manage Grouped List View in Flutter (Data from Firestore)在 Flutter 中管理分组列表视图（来自 Firestore 的数据）
【发布时间】：2021-03-29 21:10:09
【问题描述】：

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

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

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

Screenshot of my situation

Screenshot of what am I trying to achieve

List 和 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，它们实际上是相同的，只有一个措辞变化。下面我添加了如何为两者构建标题。

您在 Widget 顶部看到的 Header：

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

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

【问题讨论】：

标签： flutter google-cloud-firestore flutter-listview grouped-list

【解决方案1】：

groupBy: (element) => element.dataAggiornamento

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

【讨论】：