直播列表(Flutter)

最近更新时间:2025-09-18 11:47:21

我的收藏

功能预览

本文详细介绍了 TUILiveKit 中的直播列表页面功能。您可以直接在现有项目中参考本文档,集成我们已开发完成的直播列表页面。该页面支持下拉刷新、上拉加载以及点击加入直播间等功能。


快速接入

步骤 1. 开通服务

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

步骤 2. 代码集成

参考 准备工作 接入 TUILiveKit

步骤 3. 添加直播列表页面

在您需要进入直播列表页面的调用入口(具体由您的业务决定),执行如下操作,拉起直播列表页面或将直播列表页面集成到自己的 Widget 树中:
直接跳转
集成到 Widget 树
// 跳转到直播列表页面
Navigator.push(context, MaterialPageRoute(
builder: (context) {
return LiveListWidget();
}));
// --- 根据您的Widget树结构,选择以下一种方式集成 ---

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

// [选项二] 作为多个子Widget之一(多子树)
// 适用于Column、Row、Stack等可以包含多个子Widget的布局
Stack(
children: [
YourOtherWidget(), // 您的其他子Widget
LiveListWidget(), // 在此处集成直播列表页
YourOtherWidget(), // 您的其他子Widget
])

下一步

恭喜您,现在您已经成功集成了 直播列表 功能。接下来,您可以实现主播开播、观众观看等功能,可参考下表:
功能
描述
集成指引
主播开播
实现主播开播全流程功能,包括开播前的准备和开播后的各种互动
观众观看
实现观众进入主播的直播间后观看直播,实现观众连麦 、直播间信息、在线观众、弹幕显示等功能

常见问题

集成直播列表功能后页面没有任何直播怎么办?

如果您看到空白页面,需要检查您是否已完成 登录步骤。为了测试该功能,您可以使用两台设备:一台设备用于开播,另一台设备在直播列表页面,就能拉取到已开播的直播间。