本文将介绍如何定制 TUILiveKit 的用户界面，我们提供了三个方案供您选择：界面微调方案、自定义部分 UI 方案。
方案一：界面微调方案
替换图标
您可以直接替换
Flutter/assets/images文件夹下的图标，以确保整个 App 中的图标色调风格保持一致，请在替换时保持图标文件的名字不变。
替换文案
您可以通过修改
Flutter/lib/common/language/i10n/目录下的 livekit_en.arb 和 livekit_zh.arb 文件来修改TUILiveKit 界面的字符串内容。// 修改完字符串之后，需要在当前功能目录下执行下面的命令让其生效flutter gen-l10n
方案二：自定义部分 UI 方案
公共的 UI 组件
文件位置：Flutter/lib/common/ui_componentui_component├── audience_list // 主播推流页面和观众拉流页面右上角的 观众列表UI目录│ ├── audience_list_panel_widget.dart // 观众列表 被点击，弹出的观众列表面板视图│ └── audience_list_widget.dart // 观众列表 视图├── audioe_ffect // 主播推流页面功能区的音效设置面板目录│ ├── service // 音效设置面板 的服务层目录│ ├── audio_effect_service.dart // 音效设置面板 的服务层，封装了音效设置相关的api│ ├── store // 音效设置面板 的数据层目录│ ├── audio_effect_state_factory.dart // 音效设置面板 生成数据层数据的工厂类实现│ └── audio_effect_state.dart // 音效设置面板 数据的具体封装类│ └── widget // 音效设置面板 的视图层目录│ ├── audio_effect_panel_widget.dart // 音效设置面板 的视图具体实现│ ├── change_voice_widget.dart // 音效设置面板 视图中的变声视图│ └── reverb_widget.dart // 音效设置面板 视图中的混响视图├── dashboard // 仪表盘视图的目录│ ├── anchor_dashboard_widget.dart // 主播结束直播后，显示主播仪表盘视图的实现│ └── audience_dashboard_widget.dart // 观众收到主播结束直播后，显示观众端仪表盘视图的实现├── live_info // 直播间信息面板的目录│ ├── live_info_detail_widget.dart // 直播间信息面板 被点击后，弹出的直播间信息详情页面板│ └── live_info_widget.dart // 直播间信息面板 的视图实现├── music // 音乐面板功能 实现的目录│ ├── service // 音乐设置面板 的服务层目录│ ├── music_service.dart // 音乐面板服务层的具体实现，封装了音乐播放相关的 api│ ├── store // 音乐设置面板 的数据层目录│ ├── music_state_factory.dart // 音乐设置面板 生成数据层数据的工厂类实现│ └── music_state.dart // 音乐设置面板 数据的具体封装类│ └── widget // 音乐设置面板 的视图层目录│ └── music_panel_widget.dart // 音乐设置面板 的视图层的具体实现├── preview // 主播开播预览页面，直播间信息编辑区域的视图目录│ ├── live_cover_select_widget.dart // 直播间信息编辑区域的直播封面选择的视图│ └── live_info_edit_widget.dart // 直播间信息编辑区域的视图实现└── room_list // 直播间列表组件的实现目录├── service // 直播间列表组件 的服务层目录└── room_list_service.dart // 直播间列表组件服务层的具体实现，封装了直播间列表相关的 api├── store // 直播间列表组件 的数据层目录└── room_list_state.dart // 直播间列表组件 数据的具体封装类└── widget // 直播间列表组件 的视图层目录└── room_list_widget.dart // 直播间列表组件 直播间列表视图的实现
非公共的 UI 组件
文件位置：Flutter/lib/widget/live_roomlive_room├── anchor // 主播端 视图层目录│ ├── common // 主播端 视图层预览界面 和 直播界面公共的视图目录│ ├── settings_panel_widget.dart // 设置面板的实现│ └── video_params_panel_widget.dart // 选择超清、高清、标清的面板│ ├── live_streaming // 直播推流状态的视图目录│ ├── link // 观众连麦相关的视图目录│ ├── anchor_link_mic_manage_panel_widget.dart // 连麦管理面板,支持同意或者拒绝观众连麦等逻辑│ └── apply_link_mic_float_widget.dart // 有观众申请连麦时，悬浮在顶层的提示连麦的视图│ ├── anchor_living_function_widget.dart // 直播中底部功能区的视图│ └── anchor_living_widget.dart // 直播中整体的布局视图│ ├── preview // 直播预览状态的视图目录│ ├── anchor_preview_function_widget.dart // 直播预览时底部功能区的视图│ └── anchor_preview_widget.dart // 直播预览整体的布局视图│ ├── video // 主播端推流画面视图目录│ └── anchor_video_widget.dart // 主播端推流画面视图的实现│ └── anchor_widget.dart // 主播推流整体的视图布局├── audience // 观众视图层目录│ ├── live_streaming // 观众拉流的视图目录│ ├── link // 观众连麦相关的视图目录│ ├── select_link_mic_type_panel_widget.dart // 观众连麦弹出的选择语音连麦还是视频连麦的视图│ └── video_link_settings_panel_widget.dart // 视频连麦时相关参数设置面板视图│ ├── audience_function_widget.dart // 观众拉流页面底部功能区的视图│ ├── audience_living_widget.dart // 观众拉流页面子组建的布局视图│ └── audience_waiting_pass_widget.dart // 观众申请连麦时，等待主播统一的动画视图│ ├── video // 观众端拉流画面视图目录│ ├── audience_video_widget.dart // 观众端拉流画面视图的实现│ └── link_request_place_holder_widget.dart. // 观众申请连麦时，用来占位的麦上用户窗口│ └── audience_widget.dart // 观众拉流整体的视图布局└── video // 摄像头采集的视频画面视图目录├── nine_grid_layout.dart // 连麦用户的九宫格视图布局├── video_item_widget.dart // 一路视频流的封装视图└── video_widget_factory.dart // 生成 VideoView 的工厂类
方案三：自定义全部 UI 方案
TUILiveKit 的整体功能是基于 RTC Room Engine SDK 实现的，您可以完全基于 RTC Room Engine SDK 实现一套自己的 UI 界面。详情可见 RTC Room Engine SDK。
