组件概述
礼物面板组件会展示我们默认礼物后台配置的礼物,点击这些礼物就可以将这些礼物发送到直播间中,直播间中的主播和用户可以通过礼物播放器组件播放这些礼物。
效果展示:

说明:
组件接入
步骤1:下载 TUILiveKit 组件


步骤2:工程配置
1. 在工程根目录下的 settings.gradle.kts(或 settings.gradle)文件中添加 jitpack 仓库地址:中添加 jitpack 仓库依赖(下载播放礼物 svg 动画的三方库 SVGAPlayer):
dependencyResolutionManagement {repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)repositories {google()mavenCentral()// 添加 jitpack 仓库地址maven { url = uri("https://jitpack.io") }}}
dependencyResolutionManagement {repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)repositories {google()mavenCentral()// 添加 jitpack 仓库地址maven { url 'https://jitpack.io' }}}
2. 在工程根目录的 settings.gradle.kts(或 settings.gradle)文件中增加如下代码,它的作用是将您下载的 tuilivekit 组件导入到您当前的项目中:
include(":tuilivekit")
include ':tuilivekit'
3. 在 app 目录下找到 build.gradle.kts(或 build.gradle)文件,并在其中增加以下代码,它的作用是声明当前 app 对新加入的 tuilivekit 组件的依赖:
api(project(":tuilivekit"))
api project(':tuilivekit')
说明:
TUILiveKit 工程内部已经默认依赖:TRTC SDK、IM SDK、tuiroomengine 以及公共库 tuicore,不需要开发者单独配置。如需进行版本升级,则修改 tuilivekit/build.gradle 文件即可。
4. 由于我们在 SDK 内部使用了Java 的反射特性,需要将 SDK 中的部分类加入不混淆名单,因此需要您在 proguard-rules.pro 文件中添加如下代码:
-keep class com.tencent.** { *; }-keep class com.trtc.uikit.livekit.livestreamcore.** { *; }-keep class com.trtc.uikit.livekit.component.gift.store.model.** { *; }-keep class com.squareup.wire.** { *; }-keep class com.opensource.svgaplayer.proto.** { *; }-keep class com.tcmediax.** { *; }-keep class com.tencent.** { *; }-keep class com.tencent.xmagic.** { *; }-keep class androidx.exifinterface.** {*;}-keep class com.google.gson.** { *;}# Tencent Effect SDK - beauty-keep class com.tencent.xmagic.** { *;}-keep class org.light.** { *;}-keep class org.libpag.** { *;}-keep class org.extra.** { *;}-keep class com.gyailib.**{ *;}-keep class com.tencent.cloud.iai.lib.** { *;}-keep class com.tencent.beacon.** { *;}-keep class com.tencent.qimei.** { *;}-keep class androidx.exifinterface.** { *;}
5. 在 app 目录下找到
AndroidManifest.xml
文件,在 application 节点中添加 tools:replace="android:allowBackup"
和 android:allowBackup="false"
,覆盖组件内的设置,使用自己的设置。示例代码如下:// app/src/main/AndroidManifest.xml<application...// 添加如下配置覆盖 依赖的 sdk 中的配置android:allowBackup="false"tools:replace="android:allowBackup">
使用 CocoaPods 导入组件,导入组件具体步骤如下:
1. 您需要在 GitHub 上下载 Gift 和 Common 文件夹到本地。

2. 请在您的 Podfile 文件中添加
pod 'TUIGift'
和pod 'TUILiveResources'
依赖。target 'xxxx' do......pod 'TUILiveResources', :path => '../Component/Common/TUILiveResources.podspec'//路径是您的Podfile文件与TUILiveResources.Podspec文件之间的相对路径pod 'TUIGift', :path => '../Component/Gift/TUIGift.podspec'//路径是您的Podfile文件与TUIGift.Podspec文件之间的相对路径end
如果您没有 Podfile 文件,首先终端
cd
到 xxxx.xcodeproj 目录,然后通过以下命令创建:pod init
3. 在终端中,首先
cd
到 Podfile 目录下,然后执行以下命令,安装组件。pod install
4. 您在接入和使用过程中遇到的任何问题,欢迎给我们 反馈。
1. 在项目工程的 pubspec.yaml 文件的 dependencies 节点中,添加 gift 的依赖。
dependencies:flutter:sdk: flutterflutter_localizations:sdk: flutterintl: ^0.19.0# 添加 gift 依赖live_uikit_gift: ^1.0.0
2. 执行
flutter pub get
命令。3. 配置多语言支持,在您应用
MaterialApp
的 localizationsDelegates
和 supportedLocales
属性上添加 gift 组件的多语言支持。MaterialApp(localizationsDelegates: const [...GiftLocalizations.localizationsDelegates,], supportedLocales: const [...GiftLocalizations.supportedLocales,],// ...);
组件使用
说明:
由于礼物组件需要直播间信息参数,所以需要在观众进入直播间或者主播创建直播间后,再加载礼物组件。
接入礼物面板组件
创建
GiftListPanelView
对象,并将其添加到您的视图上,同时还需要实现 GiftListPanelView
的 OnSendGiftListener
中的 onSendGift
回调 ,获取礼物个数和礼物信息,在预处理完后可调用 GiftListPanelView
的 sendGift
函数用于礼物的实际发送。GiftListPanelView giftListPanelView = new GiftListPanelView(getContext());giftListPanelView.init("roomId");giftListPanelView.setListener(new GiftListPanelView.OnSendGiftListener() {@Overridepublic void onSendGift(GiftListPanelView view, Gift gift, int giftCount) {}});giftListPanelView.sendGift(new Gift(), 1, new GiftUser());
创建
GiftListView
对象,并将其添加到您的视图上,同时还需要实现GiftListViewDelegate
中的 onSendGift
回调方法。当您点击
GiftListView
面板上的发送按钮时,您会收到该回调方式,您可在该方法中获取准备发送的礼物个数和礼物信息,在预处理完后可调用 GiftListView
的 sendGift
函数用于礼物的实际发送。import TUIGiftprivate let giftList: [TUIGift] = [] //...将此处替换为您的礼物列表lazy var giftListView: GiftListView = {let view = GiftListView(roomId: roomId, delegate: self)view.setGiftList(giftList)return view}()// ...此处将giftListView添加到您的父视图上并调整布局func onSendGift(gift model: TUIGift, giftCount: Int) {//...此处为预处理,如校验当前用户的余额等操作let receiver = TUIGiftUser()//...此处设置礼物接受者信息let completion: TUIGiftIMSendBlock = { code, message in//...此处为sendGift的post callback回调,您可添加您的后处理逻辑,如弹toast等}giftListView.sendGift(model: model, giftCount: giftCount, receiver: receiver, completion: completion)}
说明:
在您成功进入房间之后,您才可成功调用
sendGift
函数。在您需要接入发送礼物消息的地方构建
GiftSendController
和 GiftSendWidget
对象,并将构建的 GiftSendWidget
对象添加到您的 Widget
树上。示例代码如下:GiftSendController _giftSendController = GiftSendController(roomId: "romId", /// roomId 替换为您的直播间IDowner: ownerInfo, /// ownerInfo 替换为您的直播间主播信息self: selfInfo, /// selfInfo 替换为您的登录用户信息);GiftSendWidget(controller: _giftSendController);
自定义礼物面板
如果您需要修改礼物面板的礼物列表:
GiftListPanelView giftListPanelView = new GiftListPanelView(getContext());giftListPanelView.setGiftList(giftList);
如果您需要修改礼物面板的礼物列表,可调用
GiftListView
的 setGiftList
方法实现:import TUIGiftprivate let giftList: [TUIGift] = [] //...将此处替换为您的礼物列表lazy var giftListView: GiftListView = {let view = GiftListView(roomId: roomId, delegate: self)view.setGiftList(giftList)return view}()
说明:
礼物的
animationUrl
要求是一个SVGA动画。如果您需要修改礼物面板的礼物列表,您可以调用
GiftSendController
的 setGiftList
方法,示例如下: List<GiftModel> giftList = [ /// 自定义您的礼物列表数据源GiftModel(giftId: "1", giftName: "鸡蛋", imageUrl: "giftImageUrl", price: 10),GiftModel(giftId: "2", giftName: "星星", imageUrl: "giftImageUrl", price: 10),];_giftSendController.setGiftList(giftList);