注意：说明：
注意：阅读这篇前，请确保你已经了解并完成了 接入准备 和 原生内核（iOS）快速接入 的基础集成。
SDK 支持将原生的 UIView 嵌入到课堂 UI 中。
一、1. 创建 Native View
继承 TCICViewFactory 并实现视图构建逻辑：
import Foundationimport UIKitimport tcic_iosimport Flutterclass MyHeaderLeftView: TCICViewFactory { override init(messenger: FlutterBinaryMessenger) { super.init(messenger: messenger) } override func createNativeView(frame: CGRect, viewId: Int64, args: Any?) -> UIView { let view = UIView(frame: frame) view.backgroundColor = .blue let label = UILabel(frame: CGRect(x: 0, y: 0, width: 180, height: 48)) label.text = "My Header Left View From iOS" label.textColor = .white label.textAlignment = .center view.addSubview(label) return view }}
二、2. 将 Native View 注册到 SDK
在配置 TCICConfig 时，将自定义 View 传入对应的 ComponentConfig 中：
let headerConfig = TCICHeaderComponentConfig()let headerLeftBuilder: TCICHeaderComponentConfig.HeaderBuilder = { return MyHeaderLeftView(messenger: TCICManager.shared.Tengine.binaryMessenger)}headerConfig.headerLeftBuilder = headerLeftBuilder // 绑定 BuilderheaderConfig.headerLeftBuilderWidth = 200 // 设置宽度headerConfig.headerLeftBuilderHeight = 40 // 设置高度let config = TCICConfig( token: "YOUR_TOKEN", classId: "YOUR_CLASS_ID", userId: "YOUR_USER_ID", role: 1, headerComponentConfig: headerConfig)TCICManager.shared.setConfig(config)
三、基础配置
public class TCICConfig { let token: String // 用户认证令牌 let classId: String // 课程 ID let userId: String // 用户 ID let role: Int // 用户角色 let langConfig: String? // 语言配置 let isLatestBackend: Bool // 是否使用最新后端环境 let isTestBackend: Bool // 是否使用测试后端环境}
四、组件配置
public class TCICConfig { let headerComponentConfig: TCICHeaderComponentConfig? // 头部组件配置 let messageComponentConfig: TCICMessageComponentConfig? // 消息组件配置 let videoComponentConfig: TCICVideoComponentConfig? // 视频组件配置 let fontConfig: TCICFontConfig? // 字体配置 let settingComponentConfig: TCICSettingComponentConfig? // 设置组件配置 let whiteBoardComponentConfig: TCICWhiteBoardComponentConfig? // 白板组件配置 let membersComponentConfig: TCICMembersComponentConfig? // 成员组件配置}
五、回调配置 (TCICCallback)
public class TCICCallback { /// 加入课堂成功回调 public var onJoinedClassSuccessBlock: (() -> Void)? /// 退出课堂回调 public var afterExitedClassBlock: (() -> Void)? /// 加入课堂失败回调 public var onJoinedClassFailedBlock: (() -> Void)? /// 被踢出课堂回调 public var onKickedOffClassBlock: (() -> Void)? /// 成员加入课堂回调 (参数为用户信息字典) public var onMemberJoinedClassBlock: (([String: Any]) -> Void)? /// 成员离开课堂回调 (参数为用户信息字典) public var onMemberLeaveClassBlock: (([String: Any]) -> Void)? /// 收到消息回调 (参数为消息内容字典) public var onReceivedMessageBlock: (([String: Any]) -> Void)? /// 发生错误回调 (参数为: 错误代码, 错误信息) public var onErrorBlock: ((String, String) -> Void)?}
六、头部组件配置 (TCICHeaderComponentConfig)
let headerConfig = TCICHeaderComponentConfig()// 设置左侧视图headerConfig.headerLeftBuilder = { return MyHeaderLeftView(messenger: TCICManager.shared.flutterEngine.binaryMessenger)}headerConfig.headerLeftBuilderWidth = 200headerConfig.headerLeftBuilderHeight = 40// 设置头部主视图headerConfig.headerBuilder = { … }headerConfig.headerBuilderWidth = 300headerConfig.headerBuilderHeight = 50// 设置头部操作视图headerConfig.headerActionsBuilder = { … }headerConfig.headerActionsBuilderWidth = 150headerConfig.headerActionsBuilderHeight = 40// 设置右侧视图headerConfig.headerRightBuilder = { … }headerConfig.headerRightBuilderWidth = 200headerConfig.headerRightBuilderHeight = 40
七、消息组件配置 (TCICMessageComponentConfig)
let messageConfig = TCICMessageComponentConfig()// 设置消息头部视图messageConfig.messageHeaderBuilder = { … }messageConfig.messageHeaderBuilderWidth = 200messageConfig.messageHeaderBuilderHeight = 30// 设置消息气泡视图messageConfig.messageBubbleBuilder = { … }messageConfig.messageBubbleBuilderWidth = 250messageConfig.messageBubbleBuilderHeight = 80// 设置消息项视图messageConfig.messageItemBuilder = { … }messageConfig.messageItemBuilderWidth = 300messageConfig.messageItemBuilderHeight = 60// 设置消息行视图messageConfig.messageRowBuilder = { … }messageConfig.messageRowBuilderWidth = 350messageConfig.messageRowBuilderHeight = 40
八、音视频组件配置 (TCICVideoComponentConfig)
let videoConfig = TCICVideoComponentConfig()// 设置视频操作视图videoConfig.videoActionBuilder = { return MyVideoActionView(messenger: TCICManager.shared.flutterEngine.binaryMessenger)}videoConfig.videoActionBuilderWidth = 200videoConfig.videoActionBuilderHeight = 50// 设置视频浮动视图videoConfig.videoFloatBuilder = { return MyVideoFloatView(messenger: TCICManager.shared.flutterEngine.binaryMessenger)}videoConfig.videoFloatBuilderWidth = 120videoConfig.videoFloatBuilderHeight = 80