文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Flutter快速实现聊天会话列表效果示例详解

2024-04-02 19:55

关注

一、目标效果

聊天会话页的列表效果

效果如图所示:

二、原理

1、 涉及的方法

ScrollPhysics 提供了 adjustPositionForNewDimensions 方法,用于修正 ScrollViewrebuild 后的偏移量,方法声明如下

double adjustPositionForNewDimensions({
  required ScrollMetrics oldPosition,
  required ScrollMetrics newPosition,
  required bool isScrolling,
  required double velocity,
})

默认情况下,值为上一次的偏移量,即 newPosition 参数的 pixels,所以在顶部插入消息时,消息列表就会跟随滚动。

如下图所示,观察蓝色的消息条目,每播入一条消息时,所有消息会自动往上顶,而滚动视图的偏移量其实一直是没有变化的~

注:值得注意的是,如果该方法返回的值与 newPositionpixels 不相等时,则会触发视图的重新布局,所以这个操作还是比较昂贵的,应尽量减少返回值的变动。

2、实现逻辑

根据上述内容我们不难推出插入消息时的效果实现原理如下:

效果返回的值
消息紧靠列表底部时,插入消息会使列表向上推直接返回 super 的值,即 newPosition 参数的 pixels
如果不是紧靠列表底部,则固定到当前聊天位置返回原本第 0 条消息的最新偏移量

下面重点说明一下第 2 点中 返回原本第0条消息的最新偏移量 的实现逻辑:

ListView 的本质是 RenderSliverList,通过 RenderSliverListfirstChild 属性拿到当前列表中渲染的首个 item

如下图,firstChild 是下标为 10item,这个 item 与预渲染区域 cacheExtent 相关,如果将其设置为 0,则 firstChild 的下标将会是 12,这个相信不难理解。

所以,我们只需要在插入消息时,记录第 0 条消息的偏移量,当列表视图 rebuild 后,adjustPositionForNewDimensions 方法会被调用,此时取出第 1 条消息的偏移量,两者的差值加上 super 的值即为目标修正偏移量。

至于 聊天数据不满一屏时,顶部显示所有聊天数据 这个效果只是在切换 shrinkWrap 而已,比较简单就不在此展开讲了。

我已将上述逻辑进行了封装,集成于 flutter_scrollview_observer,接下来我们就来看看如何使用。

三、使用

现在只需三个步骤即可快速实现聊天会话列表的效果

步骤一:初始化必要的 ListObserverControllerChatScrollObserver

/// 初始化 ListObserverController
observerController = ListObserverController(controller: scrollController)
  ..cacheJumpIndexOffset = false;
/// 初始化 ChatScrollObserver
chatObserver = ChatScrollObserver(observerController)
  ..toRebuildScrollViewCallback = () {
    // 这里可以重建指定的滚动视图即可
    setState(() {});
  };

步骤二:按如下配置 ListView 并使用 ListViewObserver 将其包裹

Widget _buildListView() {
  Widget resultWidget = ListView.builder(
    physics: ChatObserverClampinScrollPhysics(observer: chatObserver),
    shrinkWrap: chatObserver.isShrinkWrap,
    reverse: true,
    controller: scrollController,
    ...
  );
  resultWidget = ListViewObserver(
    controller: observerController,
    child: resultWidget,
  );
  return resultWidget;
}

步骤三:插入或删除消息前,调用 ChatScrollObserverstandby 方法

onPressed: () {
  chatObserver.standby();
  setState(() {
    chatModels.insert(0, ChatDataHelper.createChatModel());
  });
},
...
onRemove: () {
  chatObserver.standby(isRemove: true);
  setState(() {
    chatModels.removeAt(index);
  });
},

注:示例中的 setState 都可以换成对列表视图进行局部刷新的代码

四、最后

GitHub地址: flutter_scrollview_observer

该库还实现了其它十分实用的功能,相关功能有对应的文章进行叙述

以上就是Flutter 快速实现聊天会话列表效果示例详解的详细内容,更多关于Flutter 聊天会话列表的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯