文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>即时通信 IM>聊天互动（含 UI）>单功能接入>消息列表>Android（Compose）

Android（Compose）

最近更新时间：2025-11-20 17:43:32

我的收藏

本页目录：

组件概述

MessageList 是一个基于 Jetpack Compose 构建的消息列表组件，主要用于展示和管理聊天消息。该组件提供了完整的消息类型展示功能：
消息类型支持：文本、图片、视频、语音、文件、系统消息、表情消息等。
消息操作：支持长按菜单操作，例如复制、删除、撤回、以及自定义操作。
高度可定制：支持多种样式配置（例如气泡颜色、圆角、字体）和自定义操作项。
聊天消息列表
消息长按菜单



组件集成

MessageList 是属于 TUIKit Compose 的一个组件，集成 TUIKit Compose 即可获取并使用 MessageList，集成方法请参考文档 TUIKit Compose 里的集成步骤。

组件构成

MessageList 组件对外仅暴露了消息列表的初始化方法，其他逻辑均封装在 MessageList 中。

对外方法

方法名
参数
描述
MessageList
conversationID: String
初始化组件，设置会话 ID。如果是单聊，组成方式为 c2c_userID。如果是群聊，组成方式为 group_groupID。
modifier: Modifier
Jetpack Compose 中用来设置组件的样式、布局、行为和外观。
config: MessageListConfigProtocol
初始化组件，设置消息列表样式。
customActions: List<MessageCustomAction>
初始化组件，设置自定义消息菜单选项。
locateMessage: MessageInfo?
初始化组件，设置定位消息。通常用于从消息搜索结果页跳转消息页同时定位到目标消息。
messageListViewModelFactory: MessageListViewModelFactory
创建组件内部 MessageListViewModel 的工厂类。通常情况下，您无需手动创建，组件已提供默认实现。
onUserClick: (String) -> Unit
初始化组件，设置点击用户头像跳转响应事件。

基础用法

MessageList 组件可直接初始化使用，需要提供会话 ID。除此之外，我们还建议您在初始化方法中实现 onUserClick。
Box(modifier = Modifier.systemBarsPadding()) {
    MessageList(conversationID = conversationID) { 
        // 点击用户头像响应事件
    }
}

自定义组件

您可以自定义消息列表的样式和操作项。方法如下。

自定义样式

您可以实现 MessageListConfigProtocol 来创建完全自定义的样式：
class MyCustomConfig(
    override val alignment: MessageAlignment = MessageAlignment.TWO_SIDED,
    override val isShowTimeMessage: Boolean = true,
    override val isShowLeftAvatar: Boolean = true,
    override val isShowLeftNickname: Boolean = true,
    override val isShowRightAvatar: Boolean = true,
    override val isShowRightNickname: Boolean = true,
    // ... 其他必须属性
) : MessageListConfigProtocol

MessageList(conversationID = conversationID, config = MyCustomConfig()) {
    // 点击用户头像响应事件
}
MessageListConfigProtocol 属性说明：
属性名
类型
描述
备注
alignment
MessageAlignment
消息对齐方式
MessageAlignment.LEFT：左对齐。
MessageAlignment.RIGHT：右对齐。
MessageAlignment.TWO_SIDED：左右对齐。
isShowTimeMessage
Boolean
是否显示时间消息
控制是否显示消息时间戳
isShowLeftAvatar
Boolean
是否显示左侧头像
控制接收消息时是否显示发送者头像
isShowLeftNickname
Boolean
是否显示左侧昵称
控制接收消息时是否显示发送者昵称
isShowRightAvatar
Boolean
是否显示右侧头像
控制发送消息时是否显示自己头像
isShowRightNickname
Boolean
是否显示右侧昵称
控制发送消息时是否显示自己昵称
isShowTimeInBubble
Boolean
是否在气泡内显示时间
控制时间戳是否显示在消息气泡内部
cellSpacing
Dp
消息间距
控制相邻消息之间的间距
isShowSystemMessage
Boolean
是否显示系统消息
控制是否显示系统通知类消息
isShowUnsupportMessage
Boolean
是否显示不支持的消息
控制是否显示不支持类型的消息
horizontalPadding
Dp
水平内边距
控制消息列表的左右内边距
avatarSpacing
Dp
头像间距
控制头像与消息内容之间的间距
isSupportCopy
Boolean
消息操作菜单是否支持复制
-
isSupportDelete
Boolean
消息操作菜单是否支持删除
-
isSupportRecall
Boolean
消息操作菜单是否支持撤回
-

自定义操作项

您可以采用多种方式自定义长按消息菜单项。

方式 1. 局部隐藏/显示操作项

初始化 MessageList 时，通过设置 config 中的 isSupportCopy、isSupportDelete、isSupportRecall显示操作项：
MessageList(
    conversationID = conversationID,
    config = ChatMessageListConfig(isSupportCopy = false)
) {
    // 点击用户头像响应事件
}

方式 2. 局部增加操作项

初始化 MessageList 时传入 customActions，MessageList 内部会在默认的 action 底部添加您增加的自定义选项：
MessageList(
    conversationID = conversationID,
    customActions = listOf(
        MessageCustomAction(title = "Share", iconResID = R.drawable.message_list_menu_forward_icon) {
            println("Share Message")
        }
    )
)

方式 3. 全局配置操作项

通过 AppBuilderConfig 进行全局配置：
// 在应用启动时配置
AppBuilderConfig.messageActionList = listOf(
    MessageAction.COPY,    // 支持复制
    MessageAction.DELETE,  // 支持删除
    MessageAction.RECALL   // 支持撤回
)

// 接下来再初始化 MessageList，所有的 MessageList 都会遵守上面的配置
MessageList(
    conversationID = conversationID,
)
注意：
局部配置的优先级大于全局配置。
自定义效果如下图所示：
消息列表操作（默认选项）
消息列表操作（隐藏 Copy 选项）
消息列表操作（新增 Share 选项）





中国站
目录