文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>实时音视频>直播与语聊 SDK>含 UI 集成>视频直播>主播开播>主播开播（Flutter）

主播开播（Flutter）

最近更新时间：2026-01-09 19:35:11

我的收藏

本页目录：

TUILiveKit 主播开播页为直播场景提供开箱即用的全功能界面，支持快速搭建主播开播所需的核心能力，让您无需关注复杂 UI 与逻辑实现，即可高效集成直播开播流程。

功能概览

开播前预览：支持主播开播前的房间名称、背景、视频预览、美颜调试、音效调试、布局模板等多种个性化配置。
连麦互动：支持直播过程中与观众 或 与其它直播间主播实时互动。
观众互动：支持弹幕、礼物等丰富直播互动形式。
开播前预览
连麦互动
观众互动










快速接入

步骤1：开通服务

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

步骤2：代码集成

参考 准备工作 接入 TUILiveKit。

步骤3：添加主播页面

TUILiveRoomAnchorWidget 已内置了直播场景的主播端完整 UI 与业务逻辑，该组件不支持浮窗模式，如需浮窗功能请转到 添加浮窗版主播页面。您只需要配置 TUILiveRoomAnchorWidget 的调用入口（具体由您的业务决定），执行如下操作，跳转到主播页面或将主播页面集成到自己的 Widget 树中：
直接跳转
集成到 Widget 树
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

// 跳转到主播页面
Navigator.push(context, MaterialPageRoute(
  builder: (BuildContext context) {
     final roomId = "test_live_room_id";
     return TUILiveRoomAnchorWidget(roomId: roomId);
}));

// --- 根据您的Widget树结构，选择以下一种方式集成 ---

// [选项一] 作为唯一子Widget（单子树）
// 适用于Container、Padding等通常只包含一个子Widget的容器
Container(   
    child: TUILiveRoomAnchorWidget(roomId: roomId) // 在此处集成主播页
)

// [选项二] 作为多个子Widget之一（多子树）
// 适用于Column、Row、Stack等可以包含多个子Widget的布局
Stack(   
    children: [     
      YourOtherWidget(), // 您的其他子Widget     
      TUILiveRoomAnchorWidget(roomId: roomId), // 在此处集成主播页  
      YourOtherWidget(), // 您的其他子Widget   
])
集成后，调用代码即可拉起主播页面，效果如 功能概览 的开播预览图所示。

步骤4：（可选）添加浮窗版主播页面

TUILiveRoomAnchorOverlay 是支持浮窗模式的主播页面。在直播期间，可以切换到 应用内 和 应用外（即画中画） 2 种场景的浮窗模式。TUILiveRoomAnchorOverlay是基于 Flutter 官方 API Overlay 和 原生画中画实现的，具体接入流程如下：

1. App 工程配置开启系统画中画特性

参考 工程配置，开启系统画中画特性。

2. App 新增二级导航器

参考 浮窗版直播间配置，在 App 中新增二级导航器。二级导航器用于承载直播页面，使其能够独立于主导航栈，实现浮窗效果。

3. 跳转浮窗版主播页面

在您需要主播开播的调用入口（具体由您的业务决定），执行如下操作，跳转到主播页面。
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

// 跳转到主播页面
Navigator.push(context, MaterialPageRoute(
  builder: (BuildContext context) {
     final roomId = "test_live_room_id";
     return TUILiveRoomAnchorOverlay(roomId: roomId);
}));
说明：
1. TUILiveRoomAnchorOverlay 不支持作为子 widget 嵌入到容器类 widget （例如：Container、Stack 等），只能作为独立页面跳转。因为内部使用了 Overlay，LiveKit 需要操控整个 Overlay 页面来切换浮窗模式。
2. iOS 端仅支持普通观众进入应用外浮窗模式。

进入应用内浮窗模式

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


进入应用外浮窗模式

依次点击主播页面右下角的更多 > 画中画，打开画中画开关。然后，您的 App 退后台时，将自动进入到系统画中画模式，效果如图所示：


自定义您的界面布局

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

直播布局模板选择

TUILiveKit 提供 4 种直播布局模板，您可在主播开播页的布局入口选择合适样式：


布局模板一览：

名称
动态宫格布局
浮动小窗布局
固定宫格布局
固定小窗布局
模板 ID
600
601
800
801
描述
默认布局，可根据连麦人数动态调整宫格大小。
连麦嘉宾以浮动小窗形式显示。
连麦人数固定，每个嘉宾占据一个固定宫格。
连麦人数固定，嘉宾以固定小窗形式显示。
预览







文案定制

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 图片文件来快速修改自定义界面所需的图标。

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

下一步

恭喜您，现在您已经成功集成了主播开播。接下来，您可以实现观众观看、直播列表等功能，可参考下表：
功能
描述
集成指引
观众观看
实现观众进入主播的直播间后观看直播，实现观众连麦 、直播间信息、在线观众、弹幕显示等功能
观众观看
直播列表
展示直播列表界面和功能，包含直播列表和房间信息展示功能
直播列表

常见问题

开播后无画面？

请前往手机设置 > App > 相机，检查摄像头权限是否开启，可参考如下示例：
iOS
Android






开播提示“未登录”？

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

App 退后台无法进入应用外浮窗（画中画）模式？

参考 进入应用外浮窗模式，进入直播间后，开启了画中画开关。
如果是 Android 平台，在您打开画中画开关后，还会自动检测 App 系统画中画模式开关状态，如果没有打开，App 会自动跳转到设置页面，请您允许进入画中画模式：


弹窗无法展示或被遮挡？

如果您接入了TUILiveRoomAnchorOverlay，请确保弹窗（BottomSheet、Dialog等）的 context 来自于 rootNavigator（建议使用 Global.appContext()）。由于直播页面 Overlay 是在 secondaryNavigator 上，如果弹窗的 context 来自于 secondaryNavigator，那么弹窗将会被 Overlay 遮挡。因为同一个 Navigator 上，Overlay 的层级比普通页面要高，这样 Overlay 才能浮在普通页面的上层。
中国站
目录