本系列教程对应的代码已开源在 Github zeedle
将前文写的零散的UI组件（歌曲列表/播放控制面板/歌词面板/设置面板）拼装起来，组成最终的音乐播放器UI，用TabWidget分成多标签页，每一个标签页分担不同的功能：
export component MainWindow inherits Window {preferred-width: 850px;preferred-height: 500px;min-width: 850px;min-height: 500px;title: "Zeedle";icon: @image-url("cover.svg");callback toggle_play();callback play(SongInfo, TriggerSource);callback play_next();callback play_prev();callback change_progress(float);callback switch_mode(PlayMode);callback refresh_song_list(string);callback sort_song_list(SortKey, bool);callback set_lang(string);pure callback format_duration(float) -> string;public function set_light_theme(yes: bool) {UIState.light_ui = yes;if (yes) {Palette.color-scheme = ColorScheme.light;} else {Palette.color-scheme = ColorScheme.dark;}}tabs := TabWidget {Tab {title: @tr("Gallery");VerticalLayout {SongListView {ascending <=> UIState.sort_ascending;sort-key <=> UIState.sort_key;last-sort-key <=> UIState.last_sort_key;song-list <=> UIState.song_list;sort-songs(key, asc) => {root.sort_song_list(key, asc);}play-song(info, src) => {root.play(info, src);}}ControlPanel {max-height: 80px;min-height: 50px;preferred-height: 60px;progress <=> UIState.progress;duration <=> UIState.duration;paused <=> UIState.paused;dragging <=> UIState.dragging;play_mode <=> UIState.play_mode;current_song <=> UIState.current_song;album_image <=> UIState.album_image;change-progress(p) => {root.change_progress(p);root.focus();}toggle-play() => {root.toggle_play();}play-next() => {root.play_next();}play-prev() => {root.play_prev();}switch-mode(m) => {root.switch_mode(m);}double-clicked() => {tabs.current-index = 1; // 切换到歌词页}format-duration(d) => {return root.format_duration(d);}}}}Tab {title: @tr("Lyrics");Rectangle {width: 100%;height: 100%;z: -5;TouchArea {double-clicked => {tabs.current-index = 0; // 切换到歌曲列表页}}}LyricsPanel {width: 100%;height: 100%;album_image <=> UIState.album_image;current_song <=> UIState.current_song;lyrics <=> UIState.lyrics;progress <=> UIState.progress;lyric_viewport_y <=> UIState.lyric_viewport_y;}}Tab {title: @tr("Settings");SettingsPanel {width: 100%;height: 100%;song_dir <=> UIState.song_dir;lang <=> UIState.lang;light_ui <=> UIState.light_ui;refresh_song_list(p) => {root.refresh_song_list(p);}set_lang(l) => {root.set_lang(l);}set_light_theme(yes) => {root.set_light_theme(yes);}}}Tab {title: @tr("About");Text {width: 100%;height: 100%;font-size: 16px;text: UIState.about_info;horizontal-alignment: center;vertical-alignment: center;}}}
}
)
