如何在 Flutter 中处理聊天应用程序的滚动视图答案

【问题标题】：How to handle scroll view for chat application in Flutter如何在 Flutter 中处理聊天应用程序的滚动视图
【发布时间】：2021-04-08 06:49:12
【问题描述】：

我正在创建一个聊天应用程序，但我遇到了聊天滚动问题。就像我有 50 条消息，那么是的，我需要向下滚动以查看最新消息，当第一次打开该屏幕时我需要从最后一条消息打开我的屏幕（表示我发送或收到的最后一条消息）。

所以基本上现在我已经完成了打开页面和初始化状态的操作，我正在调用滚动控制器，然后转到滚动的末尾，实际上它运行不正常。

当我发送消息时，它需要自动滚动到末尾，我添加了滚动到末尾，但它不能像滚动一样滚动，直到最后第二条消息它才滚动到最后一条消息。

这是我尝试过的代码：

   _scrollController.animateTo(
                    _scrollController.position.maxScrollExtent,
                    curve: Curves.easeOut,
                    duration: const Duration(milliseconds: 300),
                  );

【问题讨论】：

标签： flutter dart uiscrollview scrollview chat

【解决方案1】：

您可以尝试添加 PostFrameCallback：

WidgetsBinding.instance.addPostFrameCallback((_) {
  _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
});

只要有重建，它就会显示在列表的底部

【讨论】：

我需要在哪里使用这个，你能告诉我确切的位置
@RutvikGumasana 可以在 Widget 的 initState 中调用

【解决方案2】：

我在使用聊天应用程序时遇到了类似的挑战，我找到的解决方案如下：

Align(
    alignment: Alignment.bottomCenter,
    child: ListView.builder(
      itemCount: 100,
      reverse: true,
      shrinkWrap: true,
      itemBuilder: (context, i) {
        return ListTile(
          title: Text(i.toString()),
        );
      },
    ),
  )

请记住，您必须将消息数组传递给ListView.builder，以便您最近的消息应始终位于数组的第 0 位。您可以通过使用查询来实现。

【讨论】：

所以你的意思是我需要添加反向列表？
是的，您可以按日期对它们进行排序