产品动态
公告
Flutter
组件概述
MessageList 是消息列表组件，主要用于展示和管理聊天消息。该组件提供了完整的消息类型展示功能：
消息类型支持：文本、图片、视频、语音、文件、系统消息、表情消息等。
消息操作：支持长按菜单操作，例如复制、删除、撤回、以及自定义操作。
高度可定制：支持多种样式配置（例如气泡颜色、圆角、字体）和自定义操作项。
聊天消息列表 | 消息长按菜单 |
 |  |
组件集成
MessageList 是属于 TUIKit Flutter 的一个组件，集成 TUIKit Flutter 即可获取并使用 MessageList，集成方法请参考文档 TUIKit Flutter 里的集成步骤。
组件构成
MessageList 组件对外仅暴露了消息列表的初始化方法，其他逻辑均封装在 MessageList 中。
对外方法
方法名 | 参数 | 描述 |
MessageList | conversationID: String | 初始化组件，设置会话 ID。如果是单聊，组成方式为 c2c_userID。如果是群聊，组成方式为 group_groupID。 |
| config: MessageListConfigProtocol | 初始化组件，设置消息列表样式。 |
| customActions: List<MessageCustomAction> | 初始化组件，设置自定义消息菜单选项。 |
| locateMessage: MessageInfo? | 初始化组件，设置定位消息。通常用于从消息搜索结果页跳转到消息页同时定位到目标消息。 |
| onUserClick: (String userID) {} | 初始化组件，设置点击用户头像跳转响应事件。 |
基础用法
MessageList 组件可直接初始化使用，需要提供会话 ID。除此之外，我们还建议您在初始化方法中实现 onUserClick。
MessageList(conversationID: 'conversation_123',onUserClick: (String userID) {// 点击用户头像响应事件},),
自定义组件
您可以自定义消息列表的样式和操作项。方法如下。
自定义样式
您可以实现
MessageListConfigProtocol 来创建完全自定义的样式：class MyCustomConfig extends MessageListConfigProtocol {@overrideString get alignment => AppBuilder.MESSAGE_ALIGNMENT_TWO_SIDED;@overridebool get isShowTimeMessage => true;@overridebool get isShowLeftAvatar => true;@overridebool get isShowLeftNickname => true;@overridebool get isShowRightAvatar => true;@overridebool get isShowRightNickname => true;// ... 其他必须属性}// 使用自定义样式MessageList(conversationID: 'conversation_123',config: MyCustomConfig(),);
MessageListConfigProtocol 属性说明：属性名 | 类型 | 描述 | 备注 |
alignment | String | 消息对齐方式 | MessageAlignment.LEFT：左对齐。MessageAlignment.RIGHT：右对齐。MessageAlignment.TWO_SIDED：左右对齐。 |
isShowTimeMessage | bool | 是否显示时间消息 | 控制是否显示消息时间戳 |
isShowLeftAvatar | bool | 是否显示左侧头像 | 控制接收消息时是否显示发送者头像 |
isShowLeftNickname | bool | 是否显示左侧昵称 | 控制接收消息时是否显示发送者昵称 |
isShowRightAvatar | bool | 是否显示右侧头像 | 控制发送消息时是否显示自己头像 |
isShowRightNickname | bool | 是否显示右侧昵称 | 控制发送消息时是否显示自己昵称 |
isShowTimeInBubble | bool | 是否在气泡内显示时间 | 控制时间戳是否显示在消息气泡内部 |
cellSpacing | double | 消息间距 | 控制相邻消息之间的间距 |
isShowSystemMessage | bool | 是否显示系统消息 | 控制是否显示系统通知类消息 |
isShowUnsupportMessage | bool | 是否显示不支持的消息 | 控制是否显示不支持类型的消息 |
horizontalPadding | double | 水平内边距 | 控制消息列表的左右内边距 |
avatarSpacing | double | 头像间距 | 控制头像与消息内容之间的间距 |
isSupportCopy | bool | 消息操作菜单是否支持复制 | - |
isSupportDelete | bool | 消息操作菜单是否支持删除 | - |
isSupportRecall | bool | 消息操作菜单是否支持撤回 | - |
自定义操作项
您可以采用多种方式自定义长按消息菜单项。
方式 1. 局部隐藏/显示操作项
初始化 MessageList 时，通过设置 config 中的
isSupportCopy、isSupportDelete、isSupportRecall 来显示操作项：MessageList(conversationID: 'conversation_123',config: ChatMessageListConfig(isSupportCopy: false),);
方式 2. 局部增加操作项
初始化 MessageList 时传入
customActions，MessageList 内部会在默认的 action 底部添加您增加的自定义选项：MessageList(conversationID: 'conversation_123',customActions: [MessageCustomAction(title: 'Share',systemIconFallback: Icons.share,action: (MessageInfo messageInfo) {print('share message');},)],);
方式 3. 全局配置操作项
通过
AppBuilderConfig 进行全局配置：// 在应用启动时配置await AppBuilder.init();AppBuilder.getInstance().messageListConfig = MessageListConfig(messageActionList: [AppBuilder.MESSAGE_ACTION_COPY,AppBuilder.MESSAGE_ACTION_DELETE,AppBuilder.MESSAGE_ACTION_RECALL,],// 其他配置);// 接下来再初始化 MessageList，所有的 MessageList 都会遵守上面的配置MessageList(conversationID: 'conversation_123',);
注意：
局部配置的优先级大于全局配置。
自定义效果如下图所示：
消息列表操作（默认选项） | 消息列表操作（隐藏【复制】选项） | 消息列表操作（新增【分享】选项） |
 |  |  |
文档反馈