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

本系列教程对应的代码已开源在 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);
                }
            }
        }
    }
}
相关推荐
心灵宝贝23 分钟前
申威架构ky10安装php-7.2.10.rpm详细步骤(国产麒麟系统64位)
开发语言·php
lly20240626 分钟前
PHP 字符串操作详解
开发语言
舒一笑1 小时前
PandaCoder:致敬MyBatis Log Plugin,但我们做得更极致!
后端·程序员·intellij idea
像是套了虚弱散2 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
旭意2 小时前
C++蓝桥杯之结构体10.15
开发语言·c++
麦麦鸡腿堡3 小时前
Java的单例设计模式-饿汉式
java·开发语言·设计模式
简单点了3 小时前
go前后端项目的启动 、打包和部署
开发语言·后端·golang
爱吃山竹的大肚肚4 小时前
@Valid校验 -(Spring 默认不支持直接校验 List<@Valid Entity>,需用包装类或手动校验。)
java·开发语言
汤姆yu4 小时前
2026版基于python的协同过滤音乐推荐系统
开发语言·python
汤姆yu4 小时前
基于python的电子商务管理系统
开发语言·python