如何在ListView的现有元素中添加新元素或创建新的ListView元素？

Question

我有以下情况：我想创建一个包含按日期排序的集合的ListView。所以，我有一个问题：如何将列表的新元素添加到现有小部件或创建新小部件（如果应该存储具有此日期的元素的小部件不存在）并向其添加元素？

我知道如何使用 ChangeNotifierProvider、ChangeNotifier 和 Consumer 来更新 UI，但我不知道如何在我的情况下使用它。
这可能很简单，或者我的想法不正确，但我是 Flutter 的新手，所以我对此感到抱歉。

我尝试向 ListView 添加分隔符，但它们依赖于索引，因此当我滚动 ListView 时它无法正常工作，因为我希望它依赖于日期，而不仅仅是索引。

Answer 1

如果我正确理解你的问题，你需要显示带有日期和其他信息的元素列表，如下所示：

20.02.2024
  element A
  element B
  element C
------------
21.02.2024
  element A
  element B
  ...
------------
...

为此，您需要几个类，例如 Element 和 DateWithElements：

class Element {
  final String name;

  Element(this.name);
}

class DateWithElements {
  final DateTime date;
  final List<Element> elements;

  DateWithElements(this.date, this.elements);
}

然后您可以使用它们将数据存储在 Statefull Widget 的 State 中（不要忘记用数据初始化变量）

final list = <DateWithElements>[];

并使用变量来构建小部件：

ListView.separated(
  shrinkWrap: true,
  itemCount: list.length,
  itemBuilder: (_, index) {
    final current = list[index];
    return Column(
      children: [
        Text(current.date.toString()),
        ...current.elements.map((e) => Text(e.name)),
      ],
    );
  },
 separatorBuilder: (_, __) => const Divider(),

），

要向列表添加新项目，您将需要一个功能：

Future<void> addItem(DateTime date, List<String> elements) async {
    final newItem = DateWithElements(
      date, 
      elements.map(Element.new).toList(),
    );
    list.add(newItem);
    setState(() {});
  }