tencent cloud

实时音视频

文档实时音视频直播与语聊 SDKUI 组件库观众列表组件观众列表组件（iOS UIKit）

观众列表组件（iOS UIKit）

Download
聚焦模式
字号
最后更新时间： 2026-07-01 18:00:38
观众列表组件（AudienceListView）封装了直播间在线人数展示和观众列表弹窗功能。您可以轻松地将其集成到您的 UI 中，为您的直播间添加观众互动的基础能力。

效果展示



快速开始

步骤1：开通服务

请参考 开通服务，领取 TUILiveKit 体验版或者开通专业版。

步骤2：代码集成

参考 准备工作 完成 TUILiveKit 组件接入。

步骤3：集成观众列表组件

以主播开播的场景为例，将 AudienceListView 添加到您的主播视图控制器中，示例代码如下：
import TUILiveKit

class YourAnchorViewController: UIViewController {

    // 1. 定义观众列表组件
    private let audienceListView = AudienceListView()
    private let liveId: String
    
    // ... 其他代码 ...

    public override func viewDidLoad() {
        super.viewDidLoad()
        
        // 2. 将组件添加到您的视图中并设置布局
        view.addSubview(audienceListView)
        audienceListView.snp.remakeConstraints { make in
            make.centerY.equalTo(closeButton)
            make.trailing.equalTo(closeButton.snp.leading).offset(-8)
            make.leading.greaterThanOrEqualTo(liveInfoView.snp.trailing).offset(20)
        }
        
        // 3. 关联直播房间 id
        audienceListView.initialize(liveId: liveId)
    }
}

自定义组件

观众列表组件提供了直播间内的观众点击回调接口，该回调支持您根据自己的业务需求实现直播间内的观众管理。

组件接口

接口
参数
说明
onUserManageButtonClicked
LiveUserInfo
观众列表点击回调。
public struct LiveUserInfo {

    public var userID: String           // 观众用户 id
    public var userName: String         // 观众用户昵称
    public var avatarURL: String        // 观众用户头像

    public init()
}

实现观众管理

默认情况下，点击观众列表中的用户会弹出管理弹框。您可以通过实现 onUserManageButtonClicked 闭包，并通过 LiveAudienceStore 来执行具体操作，例如实现将用户踢出直播间的功能：
import UIKit
import TUILiveKit
import AtomicXCore

class YourAnchorViewController: UIViewController {
    // 1. 定义观众列表组件和 Store
    private let audienceListView = AudienceListView()
    private lazy var liveAudienceStore = LiveAudienceStore.create(liveID: self.liveId)
    private let liveId: String

    public override func viewDidLoad() {
        super.viewDidLoad()
        // ... 其他代码 ...
        
        // 2. 为组件绑定自定义管理事件
        audienceListView.onUserManageButtonClicked = { [weak self] userInfo in
            self?.showUserManagementAlert(for: userInfo)
        }
    }
    
    // 3. 实现自定义的用户管理弹框
    private func showUserManagementAlert(for user: LiveUserInfo) {
        let alertController = UIAlertController(title: "观众管理", message: "您希望对 \\(user.userName) 做什么？", preferredStyle: .actionSheet)
        
        let kickOutAction = UIAlertAction(title: "踢出直播间", style: .destructive) { [weak self] _ in
            self?.kickOutUser(user)
        }
        
        let cancelAction = UIAlertAction(title: "取消", style: .cancel)
        
        alertController.addAction(kickOutAction)
        alertController.addAction(cancelAction)
        
        present(alertController, animated: true)
    }
    
    // 4. 调用 Store 方法将用户踢出
    private func kickOutUser(_ user: LiveUserInfo) {
        liveAudienceStore.kickUserOutOfRoom(userID: user.userID) { [weak self] result in
            switch result {
                case .success:
                    print("Successfully kicked out \\(user.userName).")
                case .failure(let error):
                    print("Failed to kick out user, error: \\(error.message)")
             }
        }
    }
}
上一篇: 观众列表组件（Android）下一篇: 观众列表组件（Flutter）

帮助和支持

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

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

文档反馈