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

第Flutter快速实现聊天会话列表效果示例详解目录一、目标效果二、原理1、涉及的方法2、实现逻辑三、使用四、最后

一、目标效果

聊天会话页的列表效果

1、聊天数据不满一屏时，顶部显示所有聊天数据2、插入消息时如果最新消息紧靠列表底部时，则插入消息会使列表向上推如果不是紧靠列表底部，则固定到当前聊天位置

效果如图所示：

二、原理

1、涉及的方法

ScrollPhysics提供了adjustPositionForNewDimensions方法，用于修正ScrollView在rebuild后的偏移量，方法声明如下

doubleadjustPositionForNewDimensions({

requiredScrollMetricsoldPosition,

requiredScrollMetricsnewPosition,

requiredboolisScrolling,

requireddoublevelocity,

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

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

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

2、实现逻辑

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

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

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

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

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

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

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

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

三、使用

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

步骤一：初始化必要的ListObserverController和ChatScrollObserver

///初始化ListObserverController

observerController=ListObserverController(controller:scrollController)

..cacheJumpIndexOffset=false;

///初始化ChatScrollObserver

chatObserver=ChatScrollObserver(observerController)

..toRebuildScrollViewCallback=(){

//这里可以重建指定的滚动视图即可

setState((){});

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

Widget_buildListView(){

WidgetresultWidget=ListView.builder(

physics:ChatObserverClampinScrollPhysics(observer:chatObserver),

shrinkWrap:chatObserver.isShrinkWrap,

reverse:true,

controller:scrollController,

resultWidget=ListViewObserver(

controller:observerController,

child:resultWidget,

returnresultWidget;

步骤三：插入或删除消息前，调用ChatScrollObserver的standby方法

onPressed:(){

chatObserver.standby();

setState((){

chatModels.insert(0,ChatDataHelper.createChatModel());

onRemove:(){

chatObserver.standby(isRemove:true);

setState((){

chatModels.removeAt(index);

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

四、最后

GitHub地址:fl