产品动态
产品近期公告
关于 TRTC Live 正式上线的公告
关于TRTC Conference 正式版上线的公告
Conference 商业化版本即将推出
关于多人音视频 Conference 开启内测公告
关于音视频通话 Call 正式版上线的公告
关于腾讯云音视频终端 SDK 播放升级及新增授权校验的公告
关于 TRTC 应用订阅套餐服务上线的相关说明
Flutter
本文将介绍如何定制
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 接口地址。文档反馈