tencent cloud

文档反馈

最后更新时间:2023-11-21 14:52:33
    本文将介绍如何定制TUIRoomKit的用户界面,我们提供了两个方案供您选择:界面微调方案自实现 UI 方案

    方案一:界面微调方案

    通过直接修改我们提供的 UI 源代码,对TUIRoomKit的用户界面进行调整。

    替换图标

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

    替换文案

    您可以通过修改rtc_conference_tui_kit/lib/common/languages目录下的en_us.dartzh_cn.dart 文件来修改视频会议界面的字符串内容。

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

    TUIRoomKit的各 UI 组件文件夹如下,您可根据自身的实际业务需求来修改相应文件夹下的view.dart来自定义UI
    ├── lib
    ├── common
    │ └── widgets
    │ ├── bottom_sheet.dart (<1 KB) // 通用底部弹窗
    │ ├── copy_text_button.dart (1 KB) // 通用文本复制按钮
    │ ├── dialog.dart (3 KB) // 通用对话框弹窗
    │ ├── drop_down_button.dart (<1 KB) // 通用下拉按钮
    │ ├── info_list.dart (1 KB) // 通用信息展示item
    │ ├── invite_sheet.dart (1 KB) // 通用邀请弹窗
    │ ├── rounded_container.dart (<1 KB) // 通用圆角container
    │ ├── search_bar.dart (1 KB) // 通用搜索框
    │ ├── single_select_list.dart (1 KB) // 通用单选列表
    │ ├── slider.dart (1 KB) // 通用滑动条
    │ ├── switch.dart (<1 KB) // 通用开关按钮
    │ ├── toast.dart (<1 KB) // 通用toast提示
    │ └── user_info.dart (2 KB) // 通用用户信息item组件
    ├── pages
    │ └── conference_main
    │ ├── view.dart
    │ └── widgets
    │ ├── bottom_view
    │ │ ├── view.dart (1 KB) // 底部功能按钮文件
    │ │ └── widgets
    │ │ ├── base_button.dart (7 KB) // 未展开的基础底部功能按钮
    │ │ ├── bottom_button_item.dart (1 KB) // 封装的通用底部单个item按钮
    │ │ └── more_button.dart (1 KB) // 展开后的所有底部功能按钮
    │ ├── exit
    │ │ └── view.dart (2 KB) // 退出房间底部弹窗
    │ ├── local_screen_sharing.dart (1 KB) // 本地开屏幕共享后屏幕中间屏幕共享中提示组件
    │ ├── raise_hand_list
    │ │ ├── view.dart (2 KB) // 举手申请列表(仅在举手发言模式房主端显示)
    │ │ └── widgets
    │ │ ├── title.dart (<1 KB) // 列表标题栏
    │ │ ├── user_item.dart (1 KB) // 封装的列表组件的单个item
    │ │ └── user_table.dart (1 KB) // 列表组件
    │ ├── setting
    │ │ ├── view.dart (1 KB) // 设置面板
    │ │ └── widgets
    │ │ ├── audio_setting.dart (1 KB)。 // 音频设置组件
    │ │ ├── setting_info_select.dart (1 KB)。// 单选值设置组件,如分辨率设置
    │ │ ├── setting_item.dart (<1 KB)。 // 设置面板单个设置项item
    │ │ └── video_setting.dart (4 KB) // 视频设置
    │ ├── top_view
    │ │ ├── view.dart (2 KB) // 顶部功能按钮
    │ │ └── widgets
    │ │ ├── meeting_title.dart (1 KB) // 顶部会议信息显示组件
    │ │ ├── room_info_sheet.dart (2 KB)。 // 详细会议信息底部弹窗
    │ │ └── top_button_item.dart (1 KB) // 顶部功能单个通用item按钮
    │ ├── transfer_host
    │ │ ├── view.dart (1 KB) // 转让房主面板
    │ │ └── widgets
    │ │ ├── title.dart (<1 KB) // 转让房主面板标题栏
    │ │ ├── user_item.dart (1 KB) // 可转让的房主用户列表单个item
    │ │ └── user_table.dart (1 KB) // 可转让的房主用户列表
    │ ├── user_list
    │ │ ├── view.dart (3 KB) // 成员列表
    │ │ └── widgets
    │ │ ├── button_item.dart (1 KB) // 成员列表底部按钮item
    │ │ ├── user_control.dart (6 KB) // 点击单个成员后弹出的成员管理页面
    │ │ ├── user_control_item.dart (1 KB) // 成员管理页面item
    │ │ ├── user_item.dart (3 KB) // 成员列表item
    │ │ └── user_table.dart (3 KB) // 成员列表页面列表
    │ ├── video_seat
    │ │ ├── video_item // 单个视频画面item文件夹
    │ │ │ ├── view.dart (3 KB) // 单个视频画面item
    │ │ │ └── widgets
    │ │ │ ├── video_user_info.dart (1 KB) // 视频画面item上的用户信息
    │ │ │ └── volume_bar.dart (<1 KB) // 用户信息中的麦克风图标
    │ │ ├── video_layout
    │ │ │ ├── view.dart (2 KB) // 单页视频画面中视频item的布局方式
    │ │ │ └── widgets
    │ │ │ └── with_draggable_window_widget.dart (1 KB)// 两人视频画面大小窗布局方式
    │ │ └── video_page_turning
    │ │ ├── view.dart (2 KB) // 视频画面翻页管理页面
    │ │ └── widgets
    │ │ └── page_indicator.dart (1 KB) // 页面指示器小圆点

    方案三:自定义全部 UI 方案

    TUIRoomKit的整体功能是基于TUIRoomEngine这个无 UI SDK 实现的,您可以完全基于TUIRoomEngine实现一套自己的 UI 界面。详情可见TUIRoomEngine API 接口地址
    联系我们

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

    技术支持

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

    7x24 电话支持