使用 streambuilder 的聊天应用程序上的 Flutter Animate 列表视图滚动

Question

我正在尝试在发送消息时重现 Instagram 动画。

它以编程方式滚动到页面末尾。 这是我试过的：

void onSendMessage(/params) async {
 if (content.trim() != '' && content.length < 10000) {
   await messageService.onSendMessage(/params); //send it to firestore
   textEditingController.clear();
   listScrollController.animateTo(
       0.0,
       duration: Duration(milliseconds: 500),
       curve: Curves.fastOutSlowIn
   );
 }
}

但这行不通。我想是因为firestore添加新消息的时候，整个listview都渲染了，而且因为listview是倒过来的，所以重新加载的时候scroll已经在底部了。所以动画不起作用。

这是我的完整代码：

Expanded(
        child: StreamBuilder<List<Message>>(
          stream: stream, //getting stream from firestore
          builder: (BuildContext context, AsyncSnapshot<List<Message>> snapshot) {
            if (snapshot.hasData)
            {
              List<Message>   listMessage;

              listMessage = snapshot.data ?? List.from([]);
              return Container(
                decoration: BoxDecoration(
                  color: OnesColors.background,
                ),
                child: ListView.builder(
                  padding: EdgeInsets.symmetric(horizontal: 35.0, vertical: 5),
                  itemBuilder:
                      (context, index)
                    {
                      Message   message;

                      message = listMessage[index];
                      return MessageBubble(
                        message: message,
                      ); //Just UI widget
                    },
                  reverse: true,
                  itemCount: listMessage.length,
                  shrinkWrap: true,
                  physics: BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
                  controller: listScrollController,
                ),
              );
            }
            else
            {
              return Center(child: CupertinoActivityIndicator());
            }
          },
        ),
      ),

提交方法：

onSubmitted: (value) async {
                  setState(() {
                    isLoading = true;
                  });
                  _focusNode.requestFocus();
                  await onSendMessage(/params);
                  setState(() {
                    isLoading = false;
                  });
                },

感谢您的帮助！

Answer 1

我建议让你的状态管理层这样标记新消息，然后在你的小部件中，在 AnimatedBuilder 中呈现新消息，它可以将不透明度增加到 1，或者使用转换将消息的大小从某个起始百分比增加到 100% .

Answer 2

在 itemBuilder 中：添加

  SchedulerBinding.instance.addPostFrameCallback((timeStamp) {
    listScrollController.animateTo(
        listScrollController.position.maxScrollExtent,
        duration: const Duration(milliseconds: 500),
        curve: Curves.easeOut);
  });