- 动态与公告
- 产品简介
- 购买指南
- 新手指引
- Demo 体验
- 视频通话（含 UI）
- 多人会议（含 UI）
- 组件介绍（TUIRoomKit）
- 开通服务（TUIRoomKit）
- 跑通 Demo（TUIRoomKit）
- 快速接入（TUIRoomKit）
- 预定会议（TUIRoomKit）
- 会中呼叫（TUIRoomKit）
- 界面定制（TUIRoomKit）
- 虚拟背景（TUIRoomKit）
- 会议控制（TUIRoomKit）
- 云端录制（TUIRoomKit）
- AI 降噪（TUIRoomKit）
- 会中聊天（TUIRoomKit）
- 机器人推流（TUIRoomKit）
- 更多特性（TUIRoomKit）
- 客户端 API（TUIRoomKit）
- 服务端 API（TUIRoomKit）
- 常见问题（TUIRoomKit）
- 错误码 (TUIRoomKit)
- SDK更新日志（TUIRoomKit）
- 在线直播（含 UI）
- 组件介绍（TUILiveKit）
- 开通服务（TUILiveKit）
- 跑通 Demo（TUILiveKit）
- 快速接入（TUILiveKit）
- 界面定制（TUILiveKit）
- 房间列表（TUILiveKit）
- 关注主播（TUILiveKit）
- 主播连线（TUILiveKit）
- 主播 PK（TUILiveKit）
- 观众连麦（TUILiveKit）
- 互动弹幕（TUILiveKit）
- 互动礼物（TUILiveKit）
- 礼物特效（TUILiveKit）
- 美颜特效（TUILiveKit）
- 客户端API（TUILiveKit）
- 服务端 API（TUILiveKit）
- 错误码（TUILiveKit）
- 发布日志（TUILiveKit）
- 常见问题（TUILiveKit）
- 语音聊天室（含 UI）
- 无 UI 集成
- 高级功能
- 服务端 API
- 控制台指南
- 解决方案
- 常见问题
- 旧版文档
- 协议与策略
- TRTC 政策
- 词汇表
- 动态与公告
- 产品简介
- 购买指南
- 新手指引
- Demo 体验
- 视频通话（含 UI）
- 多人会议（含 UI）
- 组件介绍（TUIRoomKit）
- 开通服务（TUIRoomKit）
- 跑通 Demo（TUIRoomKit）
- 快速接入（TUIRoomKit）
- 预定会议（TUIRoomKit）
- 会中呼叫（TUIRoomKit）
- 界面定制（TUIRoomKit）
- 虚拟背景（TUIRoomKit）
- 会议控制（TUIRoomKit）
- 云端录制（TUIRoomKit）
- AI 降噪（TUIRoomKit）
- 会中聊天（TUIRoomKit）
- 机器人推流（TUIRoomKit）
- 更多特性（TUIRoomKit）
- 客户端 API（TUIRoomKit）
- 服务端 API（TUIRoomKit）
- 常见问题（TUIRoomKit）
- 错误码 (TUIRoomKit)
- SDK更新日志（TUIRoomKit）
- 在线直播（含 UI）
- 组件介绍（TUILiveKit）
- 开通服务（TUILiveKit）
- 跑通 Demo（TUILiveKit）
- 快速接入（TUILiveKit）
- 界面定制（TUILiveKit）
- 房间列表（TUILiveKit）
- 关注主播（TUILiveKit）
- 主播连线（TUILiveKit）
- 主播 PK（TUILiveKit）
- 观众连麦（TUILiveKit）
- 互动弹幕（TUILiveKit）
- 互动礼物（TUILiveKit）
- 礼物特效（TUILiveKit）
- 美颜特效（TUILiveKit）
- 客户端API（TUILiveKit）
- 服务端 API（TUILiveKit）
- 错误码（TUILiveKit）
- 发布日志（TUILiveKit）
- 常见问题（TUILiveKit）
- 语音聊天室（含 UI）
- 无 UI 集成
- 高级功能
- 服务端 API
- 控制台指南
- 解决方案
- 常见问题
- 旧版文档
- 协议与策略
- TRTC 政策
- 词汇表
功能介绍
TUILiveKit 已经支持了房间列表 UI 组件
LiveListWidget，房间列表组件可以帮您展示当前应用下所有的在线直播和语音聊天室的直播间，当您接入房间列表 UI组件后，只需要点击列表中的某个直播间，就可以实时观看当前主播的直播内容。进入直播间后您还可以通过弹幕、礼物、连麦等功能和主播进行实时互动。房间列表组件 | 观看直播 | 和主播连麦 |
 |  |  |
功能接入
说明：
在您的 widget 中，通过加载 TUILiveKit 的
LiveListWidget 组件，就可以展示房间列表。import 'package:tencent_live_uikit/tencent_live_uikit.dart';......return Scaffold( body: SizedBox( width: _screenWidth, height: double.infinity, child: LiveListWidget(), // 在自己的 widget树中 添加 TUILiveKit 的 房间列表组件 LiveListWidget ), );
功能定制
如果当前的 UI 不满足您的需求，您可以通过修改
Flutter/lib/common/ui_component/room_list 目录下的源代码，来实现您满意的 UI 效果。为了您更方便的定制 UI，这里对房间列表相关的文件做了介绍。// 文件位置：Flutter/lib/common/ui_component/room_list // 直播间列表组件的实现目录├── service // 直播间列表组件 的服务层目录│ └── room_list_service.java // 直播间列表组件服务层的具体实现，封装了直播间列表相关的 api├── store // 直播间列表组件 的数据层目录│ └── room_list_state.java // 直播间列表组件 数据的具体封装类└── view // 直播间列表组件 的视图层目录└── room_list_view.java // 直播间列表组件 直播间列表视图的实现
关键代码
获取直播间列表插件
// 文件位置：TUILiveKit/Flutter/lib/common/ui_component/room_list/service/room_list_service.dartlate final TUILiveListManager _liveListManager = TUIRoomEngine.sharedInstance().getExtension(TUIExtensionType.liveListManger);
通过插件获取直播间列表
// 文件位置：TUILiveKit/Flutter/lib/common/ui_component/room_list/service/room_list_service.dartFuture<void> _fetchLiveList() async { final String cursor = roomListState.cursor; TUIValueCallBack<TUILiveListResult> result = await _liveListManager.fetchLiveList(cursor, fetchListCount); if (result.code != TUIError.success) { ErrorHandler.onError(result.code); roomListState.loadStatus.value = false; roomListState.refreshStatus.value = false; roomListState.isHaveMoreData.value = false; } else { final liveListResult = result.data as TUILiveListResult; roomListState.liveInfoList.value = liveListResult.liveInfoList; roomListState.cursor = liveListResult.cursor; roomListState.loadStatus.value = false; roomListState.refreshStatus.value = false; roomListState.isHaveMoreData.value = liveListResult.cursor.isNotEmpty; }
是
否
本页内容是否解决了您的问题？