tencent cloud

实时音视频

文档实时音视频直播与语聊 SDKUI 组件库聊天弹幕组件聊天弹幕组件（Flutter）

聊天弹幕组件（Flutter）

下载
聚焦模式
字号
最后更新时间： 2026-07-01 17:45:24

功能预览

TUILiveKit 直播弹幕为直播场景提供完整互动解决方案，能够增强直播的互动性和趣味性。通过本文档，您可快速实现直播间弹幕互动功能，并支持深度定制以满足业务需求。
弹幕消息发送组件（BarrageSendWidget）
弹幕消息展示组件（BarrageDisplayWidget）





组件构成

组件名称
具体内容
弹幕消息组件（BarrageDisplayWidget）
负责实时展示和管理弹幕消息流的组件，提供消息列表渲染、时间聚合、用户交互和响应式适配等完整的消息展示解决方案。
消息发送组件（BarrageSendWidget）
提供富文本编辑和消息发送功能的输入组件，集成表情选择器、字符限制、状态管理和跨平台适配，为用户提供流畅的消息输入体验。

快速开始

步骤1：开通服务

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

步骤2：代码集成

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

步骤3：接入弹幕消息发送组件

在您的应用中接入弹幕消息发送组件，使主播/观众能够方便地发送弹幕消息。请参考示例代码创建 BarrageSendWidget 组件并添加到您的视图：
import 'package:live_uikit_barrage/live_uikit_barrage.dart';

BarrageSendController _sendController = BarrageSendController(
                roomId: "liveRoomId",             /// liveRoomId   替换为您的直播间ID
                ownerId:  "liveOwnerId",          /// liveOwnerId  替换为您的直播间主播ID 
                selfUserId: "selfUserId",         /// selfUserId   替换为您的当前登录的用户ID
                selfName: "selfUserName");         /// selfUserName 替换为您的当前登录的用户昵称
BarrageSendWidget(controller: _sendController);
说明：
1. 弹幕消息发送组件支持系统键盘和表情键盘切换。
2. 为尊重表情设计版权，TUILiveKit 工程中不包含大表情元素切图，正式上线商用前请您替换为自己设计或拥有版权的其他表情包。下图所示默认的小黄脸表情包版权归腾讯云所有，可有偿授权使用，如果需要获得授权可 提交工单 联系我们。




步骤4：接入弹幕消息展示组件

在需要展示弹幕的位置，创建并初始化 BarrageDisplayWidget 来展示弹幕消息。ownerId 用于区分房主和观众的显示效果。
import 'package:live_uikit_barrage/live_uikit_barrage.dart';

BarrageDisplayController _displayController = BarrageDisplayController(
                roomId: "liveRoomId",             /// liveRoomId   替换为您的直播间ID
                ownerId:  "liveOwnerId",          /// liveOwnerId  替换为您的直播间主播ID 
                selfUserId: "selfUserId",         /// selfUserId   替换为您的当前登录的用户ID
                selfName: "selfUserName");        /// selfUserName 替换为您的当前登录的用户昵称
BarrageDisplayWidget(controller: _displayController);

步骤5：插入本地弹幕消息

BarrageDisplayWidget 提供了 insertMessage 接口，用于插入自定义消息（例如礼物消息、直播间公告等）。您可以通过自定义样式实现不同的展示效果。
说明：
此操作必须在进房成功后执行。
import 'package:live_uikit_barrage/live_uikit_barrage.dart';
import 'package:atomic_x_core/atomicxcore.dart';   

Barrage barrage = Barrage();
barrage.textContent = "gift";
barrage.sender.userID = "sender.userId";
barrage.sender.userName = "sender.userName";
barrage.sender.avatarURL = "sender.avatarUrl";
_displayController.insertMessage(barrage);

自定义弹幕消息样式

效果示例


弹幕消息样式默认有两种：普通弹幕（样式为 0）和自定义消息样式。如果您需要更多样式，可实现 BarrageDisplayWidget 的代理方法 CustomBarrageBuilder。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:live_uikit_barrage/live_uikit_barrage.dart';
import 'package:atomic_x_core/atomicxcore.dart';  

// 1. 实现 CustomBarrageBuilder
class MyCustomBarrageItemBuilder extends CustomBarrageBuilder {
  @override
  bool shouldCustomizeBarrageItem(Barrage barrage) {
    // 例如：只对带有 customType=type1 标记的弹幕做自定义渲染
    return barrage.extensionInfo['customType'] == 'type1';
  }

  @override
  Widget buildWidget(BuildContext context, Barrage barrage) {
    // 自定义 Widget
    final type = barrage.extensionInfo['customType'];
    if (type == 'type1') {
      return Container();
    }
    return SizedBox.shrink();
  }
}

// 2. 设置自定义 Builder
_displayController.setCustomBarrageBuilder(MyCustomBarrageItemBuilder());

// 3. 插入自定义消息
Barrage barrage = Barrage();
barrage.textContent = "gift";
barrage.sender.userID = "sender.userId";
barrage.sender.userName = "sender.userName";
barrage.sender.avatarURL = "sender.avatarUrl";
barrage.extensionInfo['customType'] = 'type1'; 
_displayController.insertMessage(barrage);

常见问题

为什么我无法看到弹幕消息？

请检查以下几点：
确保您已经正确初始化了 BarrageSendWidget 和 BarrageDisplayWidget，并且传递了正确的 roomID。
检查网络连接是否正常。

如何在弹幕消息中区分房主和观众？

在初始化 BarrageDisplayWidget 时，您需要传入 ownerId 参数。组件会根据 ownerId 自动识别房主发送的弹幕，并应用不同的样式。您也可以通过自定义弹幕样式，根据 Barrage 消息中的 user.userId 字段来判断是否为房主，并显示您想要的特定效果。

上一篇: 聊天弹幕组件 (Android)下一篇: 聊天弹幕组件（iOS UIKit）

帮助和支持

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

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

文档反馈