腾讯云多人音视频房间SDK界面定制（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 (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 接口地址。

对音视频的解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案