如何在 ListView 顶部插入小部件?

Nic*_*ick 5 dart flutter

简要说明:

在我的所有代码示例中,您将看到类似的内容,material.Widget而不仅仅是Widget. 这是因为我喜欢这样命名我的导入,例如:

import 'package:flutter/material.dart' as material;
Run Code Online (Sandbox Code Playgroud)

我的问题:

我试图让 ListView 在列表顶部显示新添加的小部件。我有一个简单的有状态小部件,它只包含一个模型列表(包含构造要进入 ListView 的小部件的必要信息的类),并且应该基于该列表构造 ListView 的子项。

class Page extends material.StatefulWidget {
  final List<CardModel> cardModels;
  Page(this.cardModels);

  @override
  _PageState createState() => new _PageState(cardModels);
}

class _PageState extends material.State<Page> {
  List<CardModel> cardModels;

  _PageState(this.cardModels);

  @override
  material.Widget build(material.BuildContext context) {
    return new material.ListView(
      children: cardModels.map((cardModel) => new Card(cardModel.cardID)).toList(),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

我期望的行为是,无论何时调用 build 方法(并且正确使用 setState),都应该正确重建 ListView 并按照列表的顺序包含子小部件。如果我只是按顺序向 cardModels 添加新模型,它会成功地做到这一点:

cardModels.add(new CardModel(nextID++));
Run Code Online (Sandbox Code Playgroud)

您可以看到小部件按其 id 的正确递增顺序添加:

在此处输入图片说明

但是,我希望将较新的小部件插入顶部(顶部会显示更高的 id)。为了实现这一点,我尝试在列表的开头插入新模型:

cardModels.insert(0, new CardModel(nextID++));
Run Code Online (Sandbox Code Playgroud)

不幸的是,我没有看到正确的小部件,而是一遍又一遍地得到 id 为 0 的小部件:

在此处输入图片说明

我知道模型列表正在正确更新,因为我可以将其打印出来并按降序查看 ID。我假设 Flutter 如何检测导致这种行为的小部件更改,但经过大量阅读后,我仍然无法弄清楚。任何帮助将非常感激。此外,我在最终构建页面的小部件(包含 ListView 的小部件)中调用 set state 作为其子项之一:

btn = new FloatingActionButton(
          onPressed: () => setState(_pageController.addCard),
          tooltip: 'Upload File',
          child: new Icon(Icons.file_upload),
        );
Run Code Online (Sandbox Code Playgroud)

_pageController 是修改模型列表的对象。如果这还不够信息,请告诉我,我很乐意提供更多代码或回答任何问题。

Nic*_*ick 3

事实证明,我制作的 Card 小部件不需要有状态。我将其更改为无状态,它解决了问题。不知道为什么让它们有状态会破坏它。