如何更新列表中的小部件答案

【问题标题】：How to update a Widget inside a List如何更新列表中的小部件
【发布时间】：2020-11-21 15:48:33
【问题描述】：

我有一个聊天列表，如果有用户尚未阅读的新消息，我想在每张聊天卡上显示。

列表在 StatefulWidget 中，列表包含重构的卡片也是 StatefulWidgets，我还编写了代码与 Firestore 一起检查用户是否已阅读消息，但我仍然不知道发生了什么，因为它不会更新未读消息的图标。

数据库中的数据发生变化，但聊天卡中没有。如果我重新加载应用程序，因为卡片被重建，那么它确实会改变。

这是聊天卡代码：

bool hasUnreadMessages = false;
  void unreadMessagesVerifier() {
    setState(() {
      _firestore.collection('chatRoom').document(_chatRoomID).get().then((data) async {
        hasUnreadMessages = await data['hasUnreadMessages'];
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    unreadMessagesVerifier();
    return GestureDetector(
      child: Stack(
        children: <Widget>[
          Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Flexible(
                  child: Container(
                    width: double.infinity,
                    child: Text(
                      widget.lastMessage,
                    ),
                  ),
                ),
                hasUnreadMessages
                    ? Container(
                        margin: EdgeInsets.fromLTRB(10, 0, 5, 0),
                        child: CircleAvatar(
                          radius: 7,
                          backgroundColor: Colors.blue,
                        ),
                      )
                    : SizedBox(),
              ],
            ),
          ),
        ],
      ),
      onTap: widget.onTap,
    ); // ChatCard
  }

如果需要更多信息，请告诉我！

================================================ ========================== 编辑：

感谢@Pedro R.

我只需要移动 SetState() 并检查 mounted

void unreadMessagesVerifier() {
  _firestore.collection('chatRoom').document(_chatRoomID).get().then((data) async {
      if (mounted) {
        setState(() {
          hasUnreadMessages = data['hasUnreadMessages'];
        });
      }
  });
}

【问题讨论】：

标签： flutter google-cloud-firestore

【解决方案1】：

我认为您的问题在于您调用 setState 的方式。尝试在未来完成后调用它。像这样：

  void unreadMessagesVerifier() {
        _firestore.collection('chatRoom').document(_chatRoomID).get().then((data) =>
              data['hasUnreadMessages'].then(result){
                setState((){
                    hasUnreadMessages = result;
                });
              }); 
   }

抱歉，顺便说一下格式。

【讨论】：

data['hasUnreadMessages'].then(result){ then in there 给我一个错误函数表达式无法命名。
你是对的，我在错误的地方打电话给SetState()。我将其更改为您拥有它的位置，并且忽略了重新格式化并且它起作用了！谢谢！

【解决方案2】：

考虑使用StatefulBuilder class，它会根据更新的值重建它包装的特定小部件

因此，hasUnreadMessage 将用于更新Container()。做这样的事情

StatefulBuilder(
  builder: (BuildContext context, StateSetter setState){
    // here you return the data based upon your bool value
    return hasUnreadMessages ? Container(
         margin: EdgeInsets.fromLTRB(10, 0, 5, 0),
         child: CircleAvatar(
           radius: 7,
           backgroundColor: Colors.blue,
         )
    ) : SizedBox();
  }
)

【讨论】：