Conference
  • 产品概述
  • Web
    • 跑通 Demo
    • 集成
    • UI 定制
    • Conference Control
    • 房间中聊天
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 虚拟背景
    • 更多功能
      • 悬浮窗
      • 文字水印
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEngine
        • TUIRoomEvents
        • TUIRoomEngine 定义
    • 常见问题
  • iOS
    • 跑通 Demo
    • 集成
    • UI 定制
    • 会议控制
    • 房间中聊天
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 更多功能
      • 悬浮窗
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEngine
        • TUIRoomObserver
        • 类型定义
    • 常见问题
  • Android
    • 跑通 Demo
    • 集成
    • UI 定制
    • 会议控制
    • 房间中聊天
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 更多功能
      • 悬浮窗
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEngine
        • TUIRoomObserver
        • 类型定义
    • 常见问题
  • Electron
    • 跑通 Demo
    • 集成
    • UI 定制
    • Conference Control
    • 房间中聊天
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 更多功能
      • 悬浮窗
      • 文字水印
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEvent
        • TUIRoomEngine
        • TUIRoomEngine 定义
    • 常见问题
  • Flutter
    • 跑通 Demo
    • 集成
    • UI 定制
    • 会议控制
    • In-Conference Chat
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 更多功能
      • 悬浮窗
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEngine
        • TUIRoomObserver
        • 类型定义
    • 常见问题
  • 产品概述
    • 产品概述
  • 开通服务
  • 价格中心
    • 免费时长
    • TRTC 多人音视频 Conference 包月套餐
    • 订阅套餐时长计费说明
    • 现收现付
      • 音视频时长计费说明
      • 云端录制计费说明
      • 混流转码与旁路转推计费说明
  • 服务器 API
    • REST 接口
      • RESTful 接口概述
      • RESTful 接口列表
      • Room Management
        • Create a Room
        • Destroy a Room
        • Update the Room Information
        • Get the Room Information
      • 用户管理
        • Get the Room Member List
        • Update the Room Member Information
        • Change the Room Ownership
        • Mark Room Members
        • Ban Room Members
        • Unban Room Members
        • Get the Banned Room Member List
        • Remove Room Member
      • Seat Management
        • Get the Seat List
        • Pick User on the Seat
        • Kick User off the Seat
        • Lock the Seat
    • Third-Party Callback
      • Callback Overview
      • Callback Command List
      • Callback Configuration
        • Query Callback Configuration
        • Create Callback Configuration
        • Update Callback Configuration
        • Delete Callback Configuration
      • Room Related
        • After a Room Is Created
        • After a Room Is Destroyed
        • After the Room Information Is Updated
      • User Related
        • After a Room Is Entered
        • After a Room Is Left
      • Seat Connection Related
        • After the Seat List Is Changed
  • 错误码
Conference

UI 定制

本文将介绍如何定制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 (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 接口地址