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