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

Question

我正在尝试在发送消息时重现 instagram animation。

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

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是反向的，因此重新加载时滚动已经在底部。 所以 animation 不起作用。

这是我的完整代码：

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 方法：

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

感谢您的帮助 ！

Answer 1

我建议让您的 state 管理层将新消息标记为这样，然后在您的小部件中，在 AnimatedBuilder 中渲染新消息，这会将不透明度增加到 1，或者使用转换将消息的大小从某个起始百分比增加到 100%。