- 动态与公告
- 产品简介
- 购买指南
- 新手指引
- Demo 体验
- 视频通话（含 UI）
- 多人会议（含 UI）
- 在线直播（含 UI）
- 语音聊天室（含 UI）
- 无 UI 集成
- 高级功能
- 服务端 API
- 控制台指南
- 解决方案
- 常见问题
- 旧版文档
- 协议与策略
- TRTC 政策
- 词汇表
- 动态与公告
- 产品简介
- 购买指南
- 新手指引
- Demo 体验
- 视频通话（含 UI）
- 多人会议（含 UI）
- 在线直播（含 UI）
- 语音聊天室（含 UI）
- 无 UI 集成
- 高级功能
- 服务端 API
- 控制台指南
- 解决方案
- 常见问题
- 旧版文档
- 协议与策略
- TRTC 政策
- 词汇表
本文将介绍如何定制
TUIRoomKit的用户界面，我们提供了两个方案供您选择：界面微调方案和自实现 UI 方案。方案一：界面微调方案
通过直接修改我们提供的 UI 源代码，对
TUIRoomKit的用户界面进行调整。替换图标
您可以直接替换
rtc_conference_tui_kit/assets/images文件夹下的图标，以确保整个 App 中的图标色调风格保持一致，请在替换时保持图标文件的名字不变。
替换文案
您可以通过修改
rtc_conference_tui_kit/lib/common/languages目录下的en_us.dart和zh_cn.dart 文件来修改视频会议界面的字符串内容。方案二：自定义部分 UI 方案
TUIRoomKit的各 UI 组件文件夹如下，您可根据自身的实际业务需求来修改相应文件夹下的view.dart来自定义UI。├── lib├── common│ └── widgets│ ├── bottom_sheet.dart (1 KB) // 通用底部弹窗│ ├── copy_text_button.dart (1 KB) // 通用文本复制按钮│ ├── dialog.dart (4 KB) // 通用对话框弹窗│ ├── drop_down_button.dart (<1 KB) // 通用下拉按钮│ ├── info_list.dart (1 KB) // 通用信息展示item│ ├── 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 (3 KB) // 通用用户信息item组件│ └── volume_bar.dart (2 KB) // 通用动态麦克风音量条├── pages│ └── conference_main│ ├── view.dart (3 KB)│ └── widgets│ ├── bottom_view│ │ ├── view.dart (1 KB) // 底部功能按钮文件│ │ └── widgets│ │ ├── base_button.dart (10 KB) // 未展开的基础底部功能按钮│ │ ├── bottom_button_item.dart (2 KB) // 封装的通用底部单个item按钮│ │ ├── mic_button.dart (1 KB) // 底部栏隐藏后弹出的麦克风按钮│ │ └── more_button.dart (3 KB) // 展开后的所有底部功能按钮│ ├── exit│ │ └── view.dart (2 KB) // 退出房间底部弹窗│ ├── invite_sheet│ │ └── invite_sheet.dart (1 KB) // 邀请弹窗│ ├── local_screen_sharing│ │ └── local_screen_sharing.dart (1 KB) // 本地开屏幕共享后屏幕中间屏幕共享中提示组件│ ├── raise_hand_list│ │ ├── view.dart (3 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 (3 KB) // 顶部功能按钮│ │ └── widgets│ │ ├── meeting_title.dart (2 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 (7 KB) // 点击单个成员后弹出的成员管理页面│ │ ├── user_control_item.dart (1 KB) // 成员管理页面item│ │ ├── user_item.dart (3 KB) // 成员列表item│ │ └── user_table.dart (3 KB) // 成员列表页面列表│ ├── video_seat│ │ ├── video_layout│ │ │ ├── view.dart (3 KB) // 单页视频画面中视频item的布局方式│ │ │ └── widgets│ │ │ │ ├── video_item // 单个视频画面item文件夹│ │ │ │ │ ├── view.dart (4 KB) // 单个视频画面item│ │ │ │ │ └── widgets│ │ │ │ │ ├── video_user_info.dart (2 KB) // 视频画面item上的用户信息│ │ │ │ │ └── volume_bar.dart (<1 KB) // 用户信息中的麦克风图标│ │ │ │ └── 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 接口地址。
是
否
本页内容是否解决了您的问题？