Flutter：StreamBuilder 中的 AnimatedSwitcher

Question

我试图在我的应用程序中实现一个 AnimatedSwitcher 来为使用 firebase 作为后端的聊天设置动画，我已经看到了各种示例，但是当我尝试在聊天中发送新消息时，动画不起作用，这是我的代码：

return StreamBuilder(
      stream: _chats,
      builder: (context, snapshot) {
        if (snapshot.hasData &&
            !snapshot.hasError &&
            snapshot.data.snapshot.value != null) {
          item = [];
          Map data = snapshot.data.snapshot.value;
          data.forEach((index, data) => item.add({
                "key": index,
                "message": data['message'],
                "sendBy": data['sendBy'],
                "time": data['time']
              }));
          item.sort((b, a) => a["time"].compareTo(b["time"]));
          return AnimatedSwitcher(
            duration: Duration(milliseconds: 500),
            child: ListView.builder(
                reverse: true,
                controller: _scrollController,
                itemCount: item.length,
                itemBuilder: (context, index) {
                  return MessageTile(
                      message: item[index]['message'],
                      sendByMe: widget.user.uid == item[index]['sendBy'],
                      time: item[index]['time']);
                }),
          );
        } else {
          return Container();
        }
      },
    );

Answer 1

如果“新”子项与“旧”子项的小部件类型和键相同， 但是使用不同的参数，那么 AnimatedSwitcher 不会做 它们之间的过渡

尝试在每次 StreamBuilder 重建时为子 (ListView) 提供不同的键

return AnimatedSwitcher(
  duration: Duration(milliseconds: 500),
  child: ListView.builder(
    key: ValueKey<int>(item.length), //perhaps a key based on the number of messages, so it will always be different
    reverse: true,
    controller: _scrollController,
    itemCount: item.length,
    itemBuilder: (context, index) {
      return MessageTile(
        message: item[index]['message'],
        sendByMe: widget.user.uid == item[index]['sendBy'],
        time: item[index]['time']);
  }),
);