tencent cloud

实时音视频

礼物组件 (Flutter)

下载
聚焦模式
字号
最后更新时间: 2026-06-23 16:17:59
本文档将指导您如何在 Android 项目中快速集成 TUILiveKit 的直播送礼组件。

组件概述

TUILiveKit 的礼物功能主要由以下两个核心视图组件构成:
组件名称
类名
功能描述
礼物选择面板
GiftSendWidget
点击后自动弹出礼物列表面板,处理用户的点击选择和发送事件。
礼物播放组件
GiftPlayWidget
负责接收礼物消息,并在屏幕上渲染对应的动画特效(例如 SVGA 动画)。

效果演示

礼物面板
弹幕礼物
全屏礼物










快速开始

步骤1:开通服务

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

步骤2:代码集成

请参考 准备工作 接入 TUILiveKit

步骤 3:接入礼物列表面板

GiftSendWidget 是一个图标按钮入口,点击后自动弹出礼物列表面板。
import 'package:flutter/material.dart';
import 'package:live_uikit_gift/live_uikit_gift.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. 创建 GiftListController:roomId 传入直播间ID
late final GiftListController _giftListController = GiftListController(
roomId: widget.liveId,
language: 'zh', // 礼物名称语言:'zh' / 'en' 等
);

@override
void initState() {
super.initState();
// 2. 监听送礼成功回调(可选)
_giftListController.onSendGiftCallback = (gift, count) {
debugPrint('Sent gift: ${gift.name} x$count');
};
}

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

// 3. 接入 GiftSendWidget:点击图标会弹出礼物面板
Positioned(
bottom: 12,
right: 16,
child: GiftSendWidget(
controller: _giftListController,
),
),
],
),
),
);
}
}


步骤 4:接入礼物特效播放组件

GiftPlayWidget 是一个透明的覆盖层,用于播放礼物动画。它通常覆盖在视频画面的上方,但位于交互按钮的下方。
import 'package:flutter/material.dart';
import 'package:live_uikit_gift/live_uikit_gift.dart';
import 'package:tencent_live_uikit/common/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> {
// 1. 创建 GiftPlayController:roomId 传入直播间ID
late final GiftPlayController _giftPlayController = GiftPlayController(
roomId: widget.liveId,
language: 'zh', // 礼物名称语言:'zh' / 'en' 等
);

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

// 2. 接入 GiftPlayWidget
Positioned(
width: 1.screenWidth,
height: 1.screenHeight,
child: GiftPlayWidget(
giftPlayController: _giftPlayController,
),
),
],
),
),
);
}
}


步骤 5:导入默认礼物

您新申请的应用在礼物后台默认是没有配置任何礼物的,所以集成后您的礼物发送面板默认是空的,为了您能快速体验我们的礼物收发效果,您可以使用 服务端 API 一键导入我们为您预置的礼物素材。

下一步

完成上述 UI 集成后,您已经实现了客户端的礼物展示能力。为了构建一个完整的商业化礼物功能,您还需要参考 礼物系统后端对接与进阶功能 文档,完成以下核心业务逻辑的对接:
自定义礼物配置:通过服务端 API 上传您自己的礼物图标、动画文件,并设置价格。
礼物扣费回调:配置回调地址,将送礼请求转发至您的计费后台,实现“余额校验”与“扣费”闭环。
PK 分数联动:在主播 PK 场景下,将礼物价值实时转换为 PK 分数。
数据统计:获取礼物发送记录、总价值等运营数据。
升级礼物动画特效 SDK:如果 SVGA 无法满足需求,可集成高级播放器支持 MP4/PAG 等高清透明动画。

帮助和支持

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

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

文档反馈