tencent cloud

即时通信 IM

动态与公告
产品动态
公告
产品简介
产品概述
基本概念
应用场景
功能介绍
账号系统
用户资料与关系链
消息管理
群组相关
公众号系统
音视频通话 Call
使用限制
购买指南
计费概述
价格说明
购买指引
续费指引
停服说明
退费说明
开发指引
Demo 专区
开通服务
体验 Demo
快速跑通
下载中心
SDK & Demo 源码
更新日志
聊天互动(含 UI)
TUIKit 组件介绍
快速开始
全功能接入
单功能接入
AI 集成
构建基础界面
更多特性
定义外观
国际化界面语言
推送服务(Push)
服务概述
名词解释
开通服务
快速跑通
厂商通道
数据统计
排查工具
客户端 API
服务端 API
推送回调
高级功能
更新日志
错误码
常见问题
智能客服
功能概述
快速入门
集成指引
管理员操作手册
客服操作手册
更多实践
直播间搭建
AI 聊天机器人方案
超大娱乐协作社群
Discord 实现指南
游戏内集成 Chat 指南
类 WhatsApp Channel 搭建方案
发送红包
Chat 应对防火墙限制相关
无 UI 集成
快速开始
集成 SDK
初始化
登录登出
消息相关
会话相关
群组相关
社群话题
用户管理
离线推送
云端搜索
本地搜索
公众号
客户端 API
JavaScript
Android
iOS & macOS
Swift
Flutter
Electron
Unity
React Native
C 接口
C++
服务端 API
生成 UserSig
REST API
第三方回调
控制台指南
新版控制台介绍
创建并升级应用
基本配置
功能配置
账号管理
群组管理
公众号管理
回调配置
用量统计
资源包查看指南
实时监控
开发辅助工具
访问管理
高级功能
常见问题
uni-app 常见问题
购买相关问题
SDK 相关问题
账号鉴权相关问题
用户资料与关系链相关问题
消息相关问题
群组相关问题
直播群相关问题
昵称头像相关问题
协议与认证
服务等级协议
安全合规认证
IM 政策
隐私政策
数据隐私和安全协议
平滑迁移方案
平滑迁移完整版
平滑迁移简化版
错误码
联系我们

iOS(SwiftUI)

PDF
聚焦模式
字号
最后更新时间: 2026-03-02 17:54:07

组件概述

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





组件集成

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

组件构成

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

对外方法

方法名
参数
描述
init
conversationID: String
初始化组件,设置会话 ID。
config: MessageListConfigProtocol & MessageActionConfigProtocol = ChatMessageListConfig()
初始化组件,设置消息列表样式。
locateMessage: MessageInfo? = nil
初始化组件,设置定位消息。通常用于从消息搜索结果页跳转消息页同时定位到目标消息。
onUserClick: ((String) -> Void)? = nil
初始化组件,设置点击用户头像跳转响应事件。
customActions: [MessageCustomAction] = []
初始化组件,设置自定义消息菜单选项。

基础用法

MessageList 组件可直接初始化使用,需要提供会话 ID。除此之外,我们还建议您在初始化方法中实现 onUserClick。
import AtomicX
import SwiftUI

struct ContentView: View {
var body: some View {
MessageList(
conversationID: "conversation_123",
onUserClick: { userID in
// 点击用户头像响应事件
}
)
}
}

自定义组件

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

自定义样式

您可以实现 MessageListConfigProtocol 协议来创建完全自定义的样式:
struct MyCustomConfig: MessageListConfigProtocol & MessageActionConfigProtocol
{
let alignment: Int = 0
let isShowTimeMessage: Bool = true
let isShowLeftAvatar: Bool = true
let isShowLeftNickname: Bool = true
let isShowRightAvatar: Bool = true
let isShowRightNickname: Bool = true
let isSupportCopy: Bool = false
// ... 其他属性
}

// 使用自定义样式
MessageList(
conversationID: "conversation_123",
config: MyCustomConfig()
)
MessageListConfigProtocol 协议属性说明:
属性名
类型
描述
备注
alignment
Int
消息对齐方式
1:左对齐。
2:右对齐。
3:左右对齐。
isShowTimeMessage
Bool
是否显示时间消息
控制是否显示消息时间戳。
isShowLeftAvatar
Bool
是否显示左侧头像
控制接收消息时是否显示发送者头像。
isShowLeftNickname
Bool
是否显示左侧昵称
控制接收消息时是否显示发送者昵称。
isShowRightAvatar
Bool
是否显示右侧头像
控制发送消息时是否显示自己头像。
isShowRightNickname
Bool
是否显示右侧昵称
控制发送消息时是否显示自己昵称。
isShowTimeInBubble
Bool
是否在气泡内显示时间
控制时间戳是否显示在消息气泡内部。
cellSpacing
CGFloat
消息间距
控制相邻消息之间的间距。
isShowSystemMessage
Bool
是否显示系统消息
控制是否显示系统通知类消息。
isShowUnsupportMessage
Bool
是否显示不支持的消息
控制是否显示不支持类型的消息。
horizontalPadding
CGFloat
水平内边距
控制消息列表的左右内边距。
avatarSpacing
CGFloat
头像间距
控制头像与消息内容之间的间距。
MessageActionConfigProtocol协议属性说明:
属性名
类型
描述
isSupportCopy
Bool
消息操作菜单是否支持复制。
isSupportDelete
Bool
消息操作菜单是否支持删除。
isSupportRecall
Bool
消息操作菜单是否支持撤回。

自定义操作项

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

方式 1. 局部显示操作项

初始化 MessageList 时,通过设置 config 中的 isSupportCopyisSupportDeleteisSupportRecall显示操作项:
struct CustomMessageView: View {
var body: some View {
MessageList(
conversationID: "conversation_123",
config: ChatMessageListConfig(isSupportCopy:false)
)
}
}

方式 2. 局部增加操作项

初始化 MessageList 时传入 customActions,MessageList 内部会在默认的 action 底部添加您增加的自定义选项:
struct CustomMessageView: View {
var body: some View {
MessageList(
conversationID: "conversation_123",
// 新增自定义操作
customActions: [
MessageCustomAction(title: "Share", iconName: "forward_icon_figma", systemIconFallback: "square.and.arrow.up") { _ in
print("share Message")
}
]
)
}
}

方式 3. 全局配置操作项

通过 AppBuilderConfig 进行全局配置:
// 在应用启动时配置
AppBuilderConfig.shared.messageActionList = [
.copy, // 支持复制
.delete, // 支持删除
.recall // 支持撤回
]

// 接下来再初始化 MessageList,所有的 MessageList 都会遵守上面的配置
MessageList(
conversationID: "conversation_123"
)
注意:
局部配置的优先级大于全局配置。
自定义效果如下图所示:
消息列表操作(默认选项)
消息列表操作(隐藏【复制】选项)
消息列表操作(新增【分享】选项)





帮助和支持

本页内容是否解决了您的问题?

填写满意度调查问卷,共创更好文档体验。

文档反馈