tencent cloud

实时音视频

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

直播列表（Flutter）

下载
聚焦模式
字号
最后更新时间： 2026-06-09 10:20:58

功能预览

本文对 TUILiveKit 中的直播列表页面进行了详细的介绍，您可以在已有项目中直接参考本文档集成我们开发好的直播列表页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。
双列瀑布流：默认同时预览2个直播间的画面
单列瀑布流：默认同时预览1个直播间的画面
双列瀑布流
单列瀑布流








注意：
预览直播间画面时，预览时长都会被计入观众的音视频时长，组件详细计费相关内容请参考 计费说明。

快速接入

步骤 1. 开通服务

参考 开通服务 文档领取 TUILiveKit 体验版或者开通付费版。

步骤 2. 代码集成

参考 准备工作 接入 TUILiveKit。

步骤 3. 添加直播列表瀑布流视图

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

// [选项一] 作为唯一子Widget（单子树）
// 适用于Container、Padding等通常只包含一个子Widget的容器
Container(   
    child: 
    // 在此处集成直播列表
    LiveListWidget(style: LiveListViewStyle.doubleColumn)  // 初始瀑布流样式，支持doubleColumn 和 singleColumn 两种
    )

// [选项二] 作为多个子Widget之一（多子树）
// 适用于Column、Row、Stack等可以包含多个子Widget的布局
Stack(   
    children: [     
      YourOtherWidget(), // 您的其他子Widget    
      // 在此处集成直播列表页  
      LiveListWidget(style: LiveListViewStyle.doubleColumn),  // 初始瀑布流样式，支持doubleColumn 和 singleColumn 两种
      YourOtherWidget(), // 您的其他子Widget   
])

下一步

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

常见问题

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

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

单列瀑布流和双列瀑布流有什么区别？

单列瀑布流一次预览一个直播间画面，而双列瀑布流则同时预览两个直播间画面。您可以根据自己的设计需求选择合适的布局。

预览直播画面是否收费？

是的，预览直播间画面时长会计入观众的音视频时长，这部分是需要付费的。详细的 计费说明 可以参考文档中的相关内容。

上一篇: 直播列表（Web React 桌面浏览器）下一篇: 直播列表（React Native）

帮助和支持

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

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

文档反馈