tencent cloud

实时音视频

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

观众列表组件（Flutter）

Download
聚焦模式
字号
最后更新时间： 2026-07-01 17:58:38
观众列表组件（AudienceListWidget）封装了直播间在线人数展示和观众列表弹窗功能。您可以轻松地将其集成到您的 UI 中，为您的直播间添加观众互动的基础能力。

效果展示



快速开始

步骤1：开通服务

请参考 开通服务，领取 TUILiveKit 体验版或者开通专业版。

步骤2：代码集成

参考 准备工作 完成 TUILiveKit 组件接入。

步骤3：集成观众列表组件

以主播开播的场景为例，将 AudienceListWidget 添加到您的主播视图控制器中，示例代码如下：
import 'package:flutter/material.dart';
import 'package:tencent_live_uikit/common/index.dart';
import 'package:tencent_live_uikit/component/index.dart';

class YourAnchorPage extends StatefulWidget {
  final String liveId;

  const YourAnchorPage({super.key, required this.liveId});

  @override
  State<YourAnchorPage> createState() => _YourAnchorPageState();
}

class _YourAnchorPageState extends State<YourAnchorPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            // ... 其他直播间元素 ...

            // 观众列表组件
            Positioned(
              top: 12.height,
              right: 50.width,
              child: AudienceListWidget(
                roomId: widget.liveId,
              ),
            ),
          ],
        ),
      ),
    );
  }
}



自定义组件

观众列表组件提供了直播间内的观众点击回调接口，该回调支持您根据自己的业务需求实现直播间内的观众管理。

组件接口

接口
参数
说明
onClickUserItem
LiveUserInfo
观众列表点击回调。
class LiveUserInfo {
  /// User unique identifier ID.
  String userID;

  /// User name.
  String userName;

  /// User avatar URL.
  String avatarURL;

  LiveUserInfo({this.userID = '', this.userName = '', this.avatarURL = ''});
}

实现观众管理

默认情况下，点击观众列表中的用户会弹出管理弹框。您可以通过实现 onClickUserItem 回调，并通过 LiveAudienceStore 来执行具体操作，例如实现将用户踢出直播间的功能：
import 'package:atomic_x_core/atomicxcore.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:tencent_live_uikit/component/index.dart';
import 'package:rtc_room_engine/rtc_room_engine.dart';

class YourAnchorPage extends StatefulWidget {
  final String liveId;

  const YourAnchorPage({super.key, required this.liveId});

  @override
  State<YourAnchorPage> createState() => _YourAnchorPageState();
}

class _YourAnchorPageState extends State<YourAnchorPage> {
  // 1. 定义观众列表组件用的 Store
  late final LiveAudienceStore _liveAudienceStore;

  @override
  void initState() {
    super.initState();
    _liveAudienceStore = LiveAudienceStore.create(widget.liveId);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            // ... 其他直播间元素 ...

            // 2. 接入观众列表组件，并绑定"点击单个观众"事件
            Positioned(
              top: 12.height,
              right: 50.width,
              child: AudienceListWidget(
                roomId: widget.liveId,
                onClickUserItem: (LiveUserInfo userInfo) {
                  _showUserManagementSheet(userInfo);
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 3. 自定义用户管理弹窗
  void _showUserManagementSheet(LiveUserInfo user) {
    showCupertinoModalPopup<void>(
      context: context,
      builder: (ctx) => CupertinoActionSheet(
        title: const Text('观众管理'),
        message: Text('请选择对 ${user.userName} 的操作'),
        actions: [
          CupertinoActionSheetAction(
            isDestructiveAction: true,
            onPressed: () {
              Navigator.of(ctx).pop();
              _kickOutUser(user);
            },
            child: const Text('踢出直播间'),
          ),
        ],
        cancelButton: CupertinoActionSheetAction(
          isDefaultAction: true,
          onPressed: () => Navigator.of(ctx).pop(),
          child: const Text('取消'),
        ),
      ),
    );
  }

  // 4. 调用 Store 方法将用户踢出
  void _kickOutUser(LiveUserInfo user) {
    _liveAudienceStore.kickUserOutOfRoom(user.userID).then((result) {
      if (result.errorCode == TUIError.success.rawValue) {
        debugPrint('Successfully kicked out ${user.userName}.');
      } else {
        debugPrint('Failed to kick out user, code: ${result.errorCode}, message: ${result.errorMessage}');
      }
    });
  }
}

上一篇: 观众列表组件（iOS UIKit）下一篇: 观众列表组件（Web 桌面浏览器）

帮助和支持

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

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

文档反馈