如何在ListView的顶部插入小部件？ [英] How do I insert widgets at the top of a ListView?

问题描述

简要说明：

在我所有的代码示例中，您都会看到诸如 material.Widget ，而不只是 Widget 。这是因为我喜欢这样命名我的导入：

In all of my code examples you will see things like material.Widget instead of just Widget. This is because I like to name my imports like this for example:

import 'package:flutter/material.dart' as material;

我的问题：

我试图使ListView在列表顶部显示新添加的小部件。我有一个简单的有状态小部件，该小部件仅包含模型列表（类，这些类包含构建进入ListView的小部件的必要信息），并且应基于该列表构造ListView的子级。

I am trying to make a ListView show newly added Widgets at the top of the list. I have a simple stateful widget that only contains a list of models (classes that contain necessary information to construct the widgets that are going into the ListView), and should construct ListView's children based off of that list.

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(),
    );
  }
}

我期望的行为是调用build方法（正确使用setState），即应该正确重建ListView并按列表顺序包含子窗口小部件。如果我只是简单地按顺序将新模型添加到cardModels，它将成功完成此操作：

The behavior that I expect from this is that whenever the build method is called (and setState is properly used), that the ListView should be reconstructed properly and contain child widgets in the order of the list. It successfully does this if I simply add new models to cardModels sequentially:

cardModels.add(new CardModel(nextID++));

您可以看到按顺序添加小部件，且其ID正确递增：

You can see widgets get added sequentially with their id's incrementing properly:

但是，我希望将较新的小部件插入顶部（在顶部显示较高的ID）。为此，我尝试在列表的开头插入新模型：

However, I want newer widgets to be inserted at the top (which would be shown with higher ids at the top). In order to accomplish this, I try inserting new models at the beginning of the list:

cardModels.insert(0, new CardModel(nextID++));

不幸的是，我没有看到正确的小部件，而是一次又一次获得ID为0的小部件：

Unfortunately, instead of seeing the correct widgets, I just get widget with id 0 over and over again:

我知道模型列表是正在正确更新，因为我可以将其打印出来并按降序查看ID。我假设有关颤振如何检测导致此行为的窗口小部件的更改，但是经过大量阅读后，我仍然无法弄清这一点。任何帮助将非常感激。另外，我在小部件中调用set state，最终将页面（包含ListView的小部件）构建为其子级之一：

I know that the list of models is being updated correctly because I can print it out and see the ids in descending order. I am assuming that there is something about how flutter detects changes to widgets that is causing this behavior, but after a lot of reading, I still have not been able to figure it out. Any help would be much appreciated. Also, I call set state in the widget that ends up building the page (the widget containing the ListView) as one of its children:

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

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

_pageController is the object that modifies the list of models. If this is not enough information, let me know and I am happy to provide more code or answer any questions.

推荐答案

结果，我制作的Card小部件不需要保持状态。我将其更改为无状态，它解决了问题。不知道为什么将它们设置为有状态会破坏它。

Turns out, the Card widget I made did not need to be stateful. I changed it to stateless and it solved the problem. No idea why having them as stateful would break it though.

这篇关于如何在ListView的顶部插入小部件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！