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

Flutter：StreamBuilder中的AnimatedSwitcher

1 个答案: