Feedback
iOS（SwiftUI）

本文会引导您构建聊天界面。
开发环境要求
Xcode 15 及以上
iOS 15.0 及以上
前置条件
在构建界面之前，请确保您已经完成了以下 4 件事：
1. 在控制台创建了一个应用。
2. 在控制台创建了至少 2 个用户账号。
3. 集成了 TUIKit SwiftUI。
4. 调用 LoginStore 的 login 接口登录组件。
注意：
1. 每次启动应用，登录一次即可。
2. 请确保登录成功，我们建议您在登录成功的回调里进行下文的操作。
如果您尚未完成以上 4 步，请先参考 快速开始 中的对应步骤完成，否则在实现下文功能时可能遭遇阻碍。
如果您已经完成，请继续阅读下文。
步骤说明
单聊界面
如果跳转到单聊消息界面，可以直接参考 快速开始。
群聊界面
如果跳转到群聊消息界面，需要传入有效 groupID。这里需要你有一个已经存在群组的 groupID。
如果没有创建群组，请前往 控制台 创建一个群组，操作路径：Chat > 群组管理 > 添加群组。
创建成功后，您可以直接在当前页看到 groupID：
﻿
群聊界面依然由 MessageList 和 MessageInput 拼接而成。
注意，如果你直接使用我们的示例代码，需要预填充这几个参数：
sdkAppID，上文获取的 sdkAppID。
senderUserID，发送消息者的 userID，也就是 快速开始 中创建的 user1。
senderUserSig，发送消息者的 userSig，也就是 快速开始 中创建的 user1 的 userSig。
groupID，群组 ID。
App 启动即加载群聊消息列表页，示例代码如下：
// ContentView.swift
import SwiftUI
﻿
struct ContentView: View {
    var body: some View {
        GroupChatPage()
    }
}
﻿
// GroupChatPage.swift
import AtomicX
import AtomicXCore
import SwiftUI
﻿
public struct GroupChatPage: 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 the sdkAppID here
    private let senderUserID = "" // TODO: Fill in your userID here
    private let senderUserSig = "" // TODO: Fill in your generated userSig here
    private let groupID = "" // TODO: Fill in the groupID here
﻿
    private var conversationID: String {
        // C2C conversationID: "c2c_\(userID)", Group conversationID: "group_\(groupID)"
        "group_\(groupID)"
    }
﻿
    public var body: some View {
        Group {
            if isLoggedIn {
                groupChatContentView
            } 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: - Group Chat Content
﻿
    private var groupChatContentView: some View {
        VStack(spacing: 0) {
            navigationBarView
﻿
            Divider()
                .background(.gray)
﻿
            VStack(spacing: 0) {
                // Add MessageList to this page.
                MessageList(
                    conversationID: conversationID,
                    onUserClick: { userID in
                        print(">>>>> onUserClick: \(userID)")
                    }
                )
                // Add MessageInput to this page.
                MessageInput(
                    conversationID: conversationID
                )
            }
            .ignoresSafeArea(.keyboard)
        }
    }
﻿
    // MARK: - Navigation Bar
﻿
    private var navigationBarView: some View {
        HStack {
            Image(systemName: "person.2.fill")
                .font(.system(size: 20))
                .foregroundColor(.gray)
            Text(groupID)
                .font(.system(size: 17, weight: .semibold))
                .foregroundColor(themeState.colors.textColorPrimary)
            Spacer()
        }
        .padding(.horizontal, 16)
        .frame(height: 44)
    }
﻿
    // MARK: - Login
﻿
    private func login() {
        guard !senderUserSig.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: senderUserID, userSig: senderUserSig) { result in
            switch result {
            case .success:
                print("Login success, userID: \(senderUserID)")
                isLoggedIn = true
                isLoggingIn = false
            case .failure(let error):
                print("Login failed: \(error.code), \(error.message)")
                loginError = "Login failed: \(error.code), \(error.message)"
                isLoggingIn = false
            }
        }
    }
}
运行效果示意图：
﻿
更多实践
您可以本地 运行 Chat Demo 源码，探索更多的界面实现。
联系我们
如果您在接入或使用过程中有任何疑问或者建议，欢迎 联系我们 提交反馈。
﻿
﻿