tencent cloud

即时通信 IM

iOS(SwiftUI)

下载
聚焦模式
字号
最后更新时间: 2026-06-03 16:03:50
本文会引导您构建联系人界面。

开发环境要求

Xcode 15 及以上
iOS 15.0 及以上

前置条件

在构建界面之前,请确保您已经完成了以下 4 件事:
1. 在控制台创建了一个应用。
2. 在控制台创建了至少 2 个用户账号。
3. 集成了 TUIKit SwiftUI
4. 调用 LoginStorelogin 接口登录组件。
注意:
1. 每次启动应用,登录一次即可。
2. 请确保登录成功,我们建议您在登录成功的回调里进行下文的操作。
如果您尚未完成以上 4 步,请先参考 快速开始 中的对应步骤完成,否则在实现下文功能时可能遭遇阻碍。
如果您已经完成,请继续阅读下文。

步骤说明

联系人界面由 ContactList 构成。
注意:
如果您事先没有添加过联系人,加载出来的联系人界面为空。添加联系人后,联系人会显示在界面列表中。通过 TUIKit SwiftUI 添加联系人的步骤可参考文档:添加联系人
注意,如果你直接使用我们的示例代码,需要预填充这几个参数:
sdkAppID,上文获取的 sdkAppID。
userID,操作者的 userID,也就是 快速开始 中创建的 user1。
userSig,操作者的 userSig,也就是 快速开始 中创建的 user1 的 userSig。
App 启动即加载联系人界面,示例代码如下:
// ContentView.swift
import SwiftUI

struct ContentView: View {
var body: some View {
ContactListPage()
}
}

// ContactListPage.swift
import AtomicX
import AtomicXCore
import SwiftUI

public struct ContactListPage: View {
@StateObject private var themeState = ThemeState.shared
@State private var isLoggedIn = false
@State private var isLoggingIn = true
@State private var loginError: String? = nil

private let sdkAppID: Int32 = 1234567890 // TODO: Fill in your sdkAppID here
private let userID = "" // TODO: Fill in your userID here
private let userSig = "" // TODO: Fill in your generated userSig here

public var body: some View {
Group {
if isLoggedIn {
contactListContentView
} else if isLoggingIn {
ProgressView("Logging in...")
} else {
VStack(spacing: 12) {
Image(systemName: "exclamationmark.triangle")
.font(.system(size: 40))
.foregroundColor(.orange)
Text(loginError ?? "Login failed")
.foregroundColor(.secondary)
}
}
}
.environmentObject(themeState)
.onAppear {
login()
}
}

// MARK: - Contact List Content

private var contactListContentView: some View {
VStack(spacing: 0) {
navigationBarView

Divider()
.background(.gray)

ContactList(
onContactClick: { contact in
print(">>>>> onContactClick: \\(contact.id), title: \\(contact.title ?? "")")
},
onGroupClick: { group in
print(">>>>> onGroupClick: \\(group.id), title: \\(group.title ?? "")")
}
)
}
}

// MARK: - Navigation Bar

private var navigationBarView: some View {
HStack {
Image(systemName: "person.2.fill")
.font(.system(size: 24))
.foregroundColor(.gray)
Text("Contacts")
.font(.system(size: 17, weight: .semibold))
.foregroundColor(themeState.colors.textColorPrimary)
Spacer()
}
.padding(.horizontal, 16)
.frame(height: 44)
}

// MARK: - Login

private func login() {
guard !userSig.isEmpty else {
isLoggingIn = false
loginError = "userSig is empty. Please fill in a valid userSig."
return
}
// Login is required when page appears.
LoginStore.shared.login(sdkAppID: sdkAppID, userID: userID, userSig: userSig) { result in
switch result {
case .success:
print(">>>>> Login success, userID: \\(userID)")
isLoggedIn = true
isLoggingIn = false
case .failure(let error):
print(">>>>> Login failed: \\(error.code), \\(error.message)")
loginError = "Login failed: \\(error.code), \\(error.message)"
isLoggingIn = false
}
}
}
}

运行效果如下图所示:

ContactList 对该界面的点击行为做了默认处理,如下:
动作
效果
点击新的联系人
展示未处理的加好友请求。
点击群组申请
展示加群申请列表。
点击群聊
展示当前登录账号的所有群聊。
点击黑名单
展示当前登录账号的黑名单。

更多实践

您可以本地 运行 Chat Demo 源码,探索更多的界面实现。

联系我们

如果您在接入或使用过程中有任何疑问或者建议,欢迎 联系我们 提交反馈。


帮助和支持

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

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

文档反馈