即时通信 IM 主播开播（Flutter）（主播开播）

注意：集成提示：

注意：这篇档介绍基于 UI 组件 的开播方式（含完整交互 UI）。若你需通过 Core SDK 自行搭建主播端界面，请参考 主播开播 (Core SDK)。

一、功能概览

·开播前预览： 支持主播开播前设置房间名称、封面等个性化配置。

·麦位管理： 支持上麦、下麦、禁麦、锁麦等多种麦位管理操作。

·观众互动： 支持弹幕、礼物、点赞等丰富的直播互动形式。

·直播间管理： 支持在线用户列表展示，以及直播间内的禁言、踢人等多种管理操作。

二、步骤1：开通服务

参考 开通服务 文档开通体验版或大规模直播版套餐。

三、步骤2：代码集成

参考 准备工作 接入 TUILiveKit。完成后，你的项目将成功引入 TUILiveKit 依赖。

四、步骤3：添加主播页面

TUIVoiceRoomOverlay 已内置了语聊房场景的主播端完整 UI 与业务逻辑，支持浮窗模式。在直播期间，可以切换到应用内浮窗模式。TUIVoiceRoomOverlay是基于 Flutter API Overlay 实现的，具体接入流程如下：

// 跳转到主播页面Navigator.push(context, MaterialPageRoute( builder: (context) { final roomId = "test_voice_room_id"; final params = RoomParams(); params.maxSeatCount = 10; params.seatMode = TUISeatMode.applyToTake; return TUIVoiceRoomOverlay(roomId: roomId, behavior: RoomBehavior.prepareCreate, params: params);}));

注意：说明：

集成后，调用代码即可拉起主播页面，效果如 功能概览 的开播预览图所示。

五、TUIVoiceRoomOverlay 参数说明

RoomParams 参数说明：

六、浮窗模式效果

点击主播页面右上角的浮窗按钮，进入浮窗模式，效果如下：

七、自定义界面布局

TUILiveKit 支持灵活定制开播页与直播页的功能和样式，你可根据业务需求调整布局。

八、文案定制

TUILiveKit 使用 ARB 文件和 Flutter 标准国际化方案来管理 UI 文案显示。你可以直接编辑 livekit/lib/common/language/i10n/ 目录下的 ARB 文件来修改需要调整的文案：

·livekit_en.arb：英文文案。

·livekit_zh.arb：简体中文文案。

·livekit_zh_Hant.arb：繁体中文文案。

修改后通过命令行执行 flutter gen-l10n 重新生成本地化代码即可。生成成功后，livekit/lib/common/language/gen/ 目录里的代码文件将会刷新。

九、图标定制

TUILiveKit UI 所需的图片资源在 livekit/assets/images/ 目录下管理，你可以直接替换该目录下的 PNG 图片文件来快速修改自定义界面所需的图标。

重新构建并运行应用，即可看到更新的图标。

十、下一步

恭喜你，现在你已经成功集成了主播开播 。接下来，你可以实现观众观看、直播列表和礼物系统等功能，可参考下表：

十一、开播提示“未登录”？

参考 登录指引， 确认已完成登录功能接入。