【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);
                }
            }
        }
    }
}
相关推荐
Predestination王瀞潞2 小时前
基础算法(Num012)
c语言·开发语言·算法·排序算法
NiKo_W2 小时前
C++ 反向迭代器模拟实现
开发语言·数据结构·c++·stl
你三大爷3 小时前
Safepoint的秘密探寻
java·后端
dogRuning3 小时前
基于matlab的直流电机调速系统仿真分析-一套
开发语言·matlab
Matlab仿真实验室3 小时前
基于Matlab实现路径规划
开发语言·matlab·路径规划
福大大架构师每日一题3 小时前
2025-10-02:不同 XOR 三元组的数目Ⅰ。用go语言,给你一个长度为 n 的数组 nums,数组恰好包含 1 到 n 这 n 个整数(每个数出现一次)
后端
努力也学不会java3 小时前
【Java并发】揭秘Lock体系 -- condition等待通知机制
java·开发语言·人工智能·机器学习·juc·condition
熊猫钓鱼>_>3 小时前
PySpark全面解析:大数据处理的Python利器
开发语言·python
王嘉俊9253 小时前
Django 入门:快速构建 Python Web 应用的强大框架
前端·后端·python·django·web·开发·入门