【Rust GUI开发入门】编写一个本地音乐播放器（9. 制作设置面板）

本系列教程对应的代码已开源在 Github zeedle

目的是制作这样的一个简单设置面板，里面有一些简单设置项，居中在屏幕中央：

即，每个设置项之间竖直方向布局，然后设置项内部，文字和控件水平布局：

export component SettingsPanel inherits Window {
    in property <string> song_dir;
    in property <string> lang;
    in property <bool> light_ui;
    callback refresh_song_list(string);
    callback set_lang(string);
    callback set_light_theme(bool);
    VerticalLayout {
        width: 100%;
        height: 100%;
        alignment: center;
        spacing: 20px;
        HorizontalLayout {
            alignment: center;
            spacing: 10px;
            Rectangle {
                height: 30px;
                width: 200px;
                Text {
                    x: parent.width - self.width;
                    vertical-alignment: center;
                    text: @tr("Music directory: ");
                }
            }

            LineEdit {
                text: song_dir;
                width: 200px;
                accepted(p) => {
                    refresh_song_list(p);
                }
            }
        }

        HorizontalLayout {
            alignment: center;
            spacing: 10px;
            Rectangle {
                height: 30px;
                width: 200px;
                Text {
                    x: parent.width - self.width;
                    vertical-alignment: center;
                    text: @tr("Language: ");
                }
            }

            ComboBox {
                width: 200px;
                current-value: lang;
                model: ["", "zh_CN", "es", "fr", "de", "ru"];
                selected(current-value) => {
                    root.set_lang(current-value);
                }
            }
        }

        HorizontalLayout {
            alignment: center;
            spacing: 10px;
            Rectangle {
                height: 30px;
                width: 200px;
                Text {
                    x: parent.width - self.width;
                    vertical-alignment: center;
                    text: @tr("Light theme: ");
                }
            }

            Switch {
                width: 200px;
                checked: light_ui;
                text: self.checked ? @tr("On") : @tr("Off");
                toggled => {
                    root.set_light_theme(self.checked);
                }
            }
        }
    }
}