【Rust GUI开发入门】编写一个本地音乐播放器（10. 拼装UI组件）

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;
            }
        }
    }
}