实时音视频 Flutter-在线直播（含 UI）-文档中心-腾讯云

功能介绍
TUILiveKit 已经支持了房间列表 UI 组件LiveListWidget，房间列表组件可以帮您展示当前应用下所有的在线直播和语音聊天室的直播间，当您接入房间列表 UI组件后，只需要点击列表中的某个直播间，就可以实时观看当前主播的直播内容。进入直播间后您还可以通过弹幕、礼物、连麦等功能和主播进行实时互动。
房间列表组件
观看直播
和主播连麦
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
功能接入
说明：
请务必确保已经按照 快速接入（TUILiveKit）完成登录操作。只有登录成功后才能正常进入直播预览画面。
在您的 widget 中，通过加载 TUILiveKit 的 LiveListWidget 组件，就可以展示房间列表。
Dart
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                   // 直播间列表组件 直播间列表视图的实现
关键代码
获取直播间列表插件
Dart
// 文件位置：TUILiveKit/Flutter/lib/common/ui_component/room_list/service/room_list_service.dart
﻿
late final TUILiveListManager _liveListManager = TUIRoomEngine.sharedInstance().getExtension(TUIExtensionType.liveListManger);
通过插件获取直播间列表
Dart
// 文件位置：TUILiveKit/Flutter/lib/common/ui_component/room_list/service/room_list_service.dart
﻿
Future<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;
  }
房间列表组件	观看直播	和主播连麦
Flutter

本页目录：

功能介绍

功能接入

功能定制

关键代码

获取直播间列表插件

通过插件获取直播间列表
