本系列教程对应的代码已开源在 Github zeedle
目的是制作这样的一个简单设置面板,里面有一些简单设置项,居中在屏幕中央:

即,每个设置项之间竖直方向布局,然后设置项内部,文字和控件水平布局:
slint
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);
}
}
}
}
}