tencent cloud

文档反馈

最后更新时间:2024-08-30 17:15:33
    本文将介绍如何定制 TUILiveKit 的用户界面,我们提供了三个方案供您选择:界面微调方案、自定义部分 UI 方案。

    方案一:界面微调方案

    通过直接修改我们提供的 UI 源代码,对 TUILiveKit 的用户界面进行调整,TUILiveKit 的界面源代码位于 Github 中的 Flutter 文件夹下面:

    替换图标

    您可以直接替换Flutter/assets/images文件夹下的图标,以确保整个 App 中的图标色调风格保持一致,请在替换时保持图标文件的名字不变。
    
    
    

    替换文案

    您可以通过修改 Flutter/lib/common/language/i10n/目录下的 livekit_en.arb livekit_zh.arb 文件来修改 TUILiveKit 界面的字符串内容。
    // 修改完字符串之后,需要在当前功能目录下执行下面的命令让其生效
    flutter gen-l10n

    方案二:自定义部分 UI 方案

    TUILiveKit 的 UI 主要分为两部分,公共的 UI 组件非公共的 UI 组件,您可以通过修改文件来适配您自己 UI 风格,这里对我们代码中的 UI 介绍如下:

    公共的 UI 组件

    文件位置:Flutter/lib/common/ui_component
    
    ui_component
    ├── audience_list // 主播推流页面和观众拉流页面右上角的 观众列表UI目录
    │ ├── audience_list_panel_widget.dart // 观众列表 被点击,弹出的观众列表面板视图
    │ └── audience_list_widget.dart // 观众列表 视图
    ├── audioe_ffect // 主播推流页面功能区的音效设置面板目录
    │ ├── service // 音效设置面板 的服务层目录
    │ ├── audio_effect_service.dart // 音效设置面板 的服务层,封装了音效设置相关的api
    │ ├── store // 音效设置面板 的数据层目录
    │ ├── audio_effect_state_factory.dart // 音效设置面板 生成数据层数据的工厂类实现
    │ └── audio_effect_state.dart // 音效设置面板 数据的具体封装类
    │ └── widget // 音效设置面板 的视图层目录
    │ ├── audio_effect_panel_widget.dart // 音效设置面板 的视图具体实现
    │ ├── change_voice_widget.dart // 音效设置面板 视图中的变声视图
    │ └── reverb_widget.dart // 音效设置面板 视图中的混响视图
    ├── dashboard // 仪表盘视图的目录
    │ ├── anchor_dashboard_widget.dart // 主播结束直播后,显示主播仪表盘视图的实现
    │ └── audience_dashboard_widget.dart // 观众收到主播结束直播后,显示观众端仪表盘视图的实现
    ├── live_info // 直播间信息面板的目录
    │ ├── live_info_detail_widget.dart // 直播间信息面板 被点击后,弹出的直播间信息详情页面板
    │ └── live_info_widget.dart // 直播间信息面板 的视图实现
    ├── music // 音乐面板功能 实现的目录
    │ ├── service // 音乐设置面板 的服务层目录
    │ ├── music_service.dart // 音乐面板服务层的具体实现,封装了音乐播放相关的 api
    │ ├── store // 音乐设置面板 的数据层目录
    │ ├── music_state_factory.dart // 音乐设置面板 生成数据层数据的工厂类实现
    │ └── music_state.dart // 音乐设置面板 数据的具体封装类
    │ └── widget // 音乐设置面板 的视图层目录
    │ └── music_panel_widget.dart // 音乐设置面板 的视图层的具体实现
    ├── preview // 主播开播预览页面,直播间信息编辑区域的视图目录
    │ ├── live_cover_select_widget.dart // 直播间信息编辑区域的直播封面选择的视图
    │ └── live_info_edit_widget.dart // 直播间信息编辑区域的视图实现
    └── room_list // 直播间列表组件的实现目录
    ├── service // 直播间列表组件 的服务层目录
    └── room_list_service.dart // 直播间列表组件服务层的具体实现,封装了直播间列表相关的 api
    ├── store // 直播间列表组件 的数据层目录
    └── room_list_state.dart // 直播间列表组件 数据的具体封装类
    └── widget // 直播间列表组件 的视图层目录
    └── room_list_widget.dart // 直播间列表组件 直播间列表视图的实现

    非公共的 UI 组件

    文件位置:Flutter/lib/widget/live_room
    
    live_room
    ├── anchor // 主播端 视图层目录
    │ ├── common // 主播端 视图层预览界面 和 直播界面公共的视图目录
    │ ├── settings_panel_widget.dart // 设置面板的实现
    │ └── video_params_panel_widget.dart // 选择超清、高清、标清的面板
    │ ├── live_streaming // 直播推流状态的视图目录
    │ ├── link // 观众连麦相关的视图目录
    │ ├── anchor_link_mic_manage_panel_widget.dart // 连麦管理面板,支持同意或者拒绝观众连麦等逻辑
    │ └── apply_link_mic_float_widget.dart // 有观众申请连麦时,悬浮在顶层的提示连麦的视图
    │ ├── anchor_living_function_widget.dart // 直播中底部功能区的视图
    │ └── anchor_living_widget.dart // 直播中整体的布局视图
    │ ├── preview // 直播预览状态的视图目录
    │ ├── anchor_preview_function_widget.dart // 直播预览时底部功能区的视图
    │ └── anchor_preview_widget.dart // 直播预览整体的布局视图
    │ ├── video // 主播端推流画面视图目录
    │ └── anchor_video_widget.dart // 主播端推流画面视图的实现
    │ └── anchor_widget.dart // 主播推流整体的视图布局
    ├── audience // 观众视图层目录
    │ ├── live_streaming // 观众拉流的视图目录
    │ ├── link // 观众连麦相关的视图目录
    │ ├── select_link_mic_type_panel_widget.dart // 观众连麦弹出的选择语音连麦还是视频连麦的视图
    │ └── video_link_settings_panel_widget.dart // 视频连麦时相关参数设置面板视图
    │ ├── audience_function_widget.dart // 观众拉流页面底部功能区的视图
    │ ├── audience_living_widget.dart // 观众拉流页面子组建的布局视图
    │ └── audience_waiting_pass_widget.dart // 观众申请连麦时,等待主播统一的动画视图
    │ ├── video // 观众端拉流画面视图目录
    │ ├── audience_video_widget.dart // 观众端拉流画面视图的实现
    │ └── link_request_place_holder_widget.dart. // 观众申请连麦时,用来占位的麦上用户窗口
    │ └── audience_widget.dart // 观众拉流整体的视图布局
    └── video // 摄像头采集的视频画面视图目录
    ├── nine_grid_layout.dart // 连麦用户的九宫格视图布局
    ├── video_item_widget.dart // 一路视频流的封装视图
    └── video_widget_factory.dart // 生成 VideoView 的工厂类
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持