Flutter ListView.builder 插入后不更新

Question

我有一个 SQLite 数据库，可以从中查询数据。从这些数据中，我创建了必要的小部件并将它们存储在一个列表中。将列表传递给 ListView.builder 我从列表中创建项目。一切看起来都不错，除非我将新数据添加到小部件列表中。如果我使用insert，什么都不会显示。如果我使用add 没有问题。这是sn-p。

List<MessageItem> _messageItems = <MessageItem>[];


// Reads the data and creates the widgets (all OK here)
// Called when reading the data <<<
_readDBMessages() async {
    List<Map> messages = await readMessages(_threadID);
    List<MessageItem> holderList = <MessageItem>[];
    for (final msg in messages) {
        holderList.add(new MessageItem(
            msg['message'],
            msg['timestamp'],
            msg['status'],
            _contactData['photo']));
    }

    _messageItems.clear();
    setState(() {
        _messages = msges;
        _messageItems = holderList;
    });
}


// When I use _messageItems.add(new MessageItem()); the item shows as expected but it
// it's located on top of the list. Since my ListView is reverse
// I instead use _messagesInsert(0, new MessageItem()); in doing so
// The list is not updated. Scrolling up/down will than proceed to
// show the item as expected.
// Called when storing the data <<<

_storeNewMessage(String message) {
    int timestamp = new DateTime.now().millisecondsSinceEpoch;
    storeMessage(_threadID, message, _me, 'sending', timestamp, 'text').then((onValue) {
            // _readDBMessages();
            setState(() {
                _messageItems.add(
                    new MessageItem(
                        message, timestamp, 'sending', null
                    )
            );

            print('Message inserted ---------------');
        });
    });
}


// Here's my listView constructor <<<
new Expanded(
    child: new ListView.builder(
        reverse: true,
        padding: const EdgeInsets.all(12.0),
        itemCount: (_messageItems == null) ? 0 : _messageItems.length,
        itemBuilder: (context, i) => _messageItems[i]
    )
),

根据 Flutter 医生的说法，一切正常，感谢您的帮助 ;-)

Answer 1

也许您应该将唯一的密钥传递给您的MessageItem。 当您收到数据时：

new MessageItem(
            msg['message'],
            msg['timestamp'],
            msg['status'],
            _contactData['photo'],
            key: Key(msg['message']+msg['timestamp'].toString())
            )

当您添加新条目时：

        _messageItems.add(
            new MessageItem(
                message, timestamp, 'sending', null, key: Key("${message}${timestamp}")
            )
    );

在MessageItem构造函数中：

MessageItem(..., {Key key}): super(key: key);

---

另一种方法是为列表指定一个随机键，如下所示：

  child: new ListView.builder(
    key: new Key(randomString()),

您可以阅读https://flutter.io/widgets-intro/#keys 中的键或查看Dismissible 小部件作为示例

Answer 2

我在使用 StreamBuilder 监听 Floor db 更改时遇到了类似的问题，其中 StreamBuilder 正在做出反应，但 ListView 没有得到更新。尝试了上述解决方案

child: new ListView.builder(
key: UniqueKey(),

ListView 随后会使用新数据进行更新，但存在一个问题，在上述实现中，ListView 会被刷新，这对于添加新数据非常有效，但是当我更新 db 中的数据或使用可关闭的小部件删除数据时， ListView 再次刷新并显示第一个元素。

所以我尝试将密钥添加到 itemBuilder 中的每个小部件，它对我有用

ListView.builder(
      padding: const EdgeInsets.all(8),
      itemCount: array.length,
      itemBuilder: (context, index) {
        return ListItemWidget(
          dao: dao,
          item: array[index],
          key: UniqueKey(),
        );
      },
    );