flutter - 按日期分组的 ListView Dart

Question

我一直在尝试按日期排序一些消息，但我没有让它工作。我尝试过不同的软件包，如 grouped_list和 sticky_headers .
与 sticky_headers我设法在每个帖子上方都有一个标题，但这不是我想要的。我想按天对消息进行排序。像下面的图片:


下面我有一个数据集，其中包含从我的 API 获得的数据。我的目的是从 API 获取 40 条消息。这 40 条消息按时间排序，只有消息必须在应用程序中按天分组，如上图所示。
编辑:
经过一番玩弄sticky_header包装上 flutter 。我现在已经设法获得标题。只是没有设法在正确的标题下获取消息。
数据集:

[
  {
    "time": "2020-06-16T10:31:12.000Z",
    "message": "P2 BGM-01 HV buiten materieel (Gas lekkage) Franckstraat Arnhem 073631"
  },
  {
    "time": "2020-06-16T10:29:35.000Z",
    "message": "A1 Brahmslaan 3862TD Nijkerk 73278"
  },
  {
    "time": "2020-06-16T10:29:35.000Z",
    "message": "A2 NS Station Rheden Dr. Langemijerweg 6991EV Rheden 73286"
  },
  {
    "time": "2020-06-15T09:41:18.000Z",
    "message": "A2 VWS Utrechtseweg 6871DR Renkum 74636"
  },
  {
    "time": "2020-06-14T09:40:58.000Z",
    "message": "B2 5623EJ : Michelangelolaan Eindhoven Obj: ziekenhuizen 8610 Ca CATH route 522 PAAZ Rit: 66570"
  }
]

Answer 1

首先，分解您的代码以从数据集中按日期映射获取分组。然后使用此 map 构建 UI。
使用 collection包使用 groupBy 函数。

import "package:collection/collection.dart";

void main() {
  final dataSet = [
    {
      "time": "2020-06-16T10:31:12.000Z",
      "message": "Message1",
    },
    {
      "time": "2020-06-16T10:29:35.000Z",
      "message": "Message2",
    },
    {
      "time": "2020-06-15T09:41:18.000Z",
      "message": "Message3",
    },
  ];

  var groupByDate = groupBy(dataSet, (obj) => obj['time'].substring(0, 10));
  groupByDate.forEach((date, list) {
    // Header
    print('${date}:');

    // Group
    list.forEach((listItem) {
      // List item
      print('${listItem["time"]}, ${listItem["message"]}');
    });
    // day section divider
    print('\n');
  });
}

输出:

2020-06-16:
2020-06-16T10:31:12.000Z, Message1
2020-06-16T10:29:35.000Z, Message2


2020-06-15:
2020-06-15T09:41:18.000Z, Message3

我希望这个片段能帮助你开始构建你的 UI。
您可以使用 ListView每个组中列表项的小部件。
去通过 DateTime , DateFormat处理日期、时间值的类。