Slint的学习

Slint是什么

Slint是一个跨平台的UI工具包,支持windows,linux,android,ios,web,可以用它来构建申明式UI,后端代码支持rust,c++,python,nodejs等语言。

开源地址:https://github.com/slint-ui/slint

镜像地址:https://kkgithub.com/slint-ui/slint

官方文档:https://docs.slint.dev/latest/docs/slint/

学习动机

对rust好奇,想学习除了QT之外的流行的跨平台UI。

其实现在除了QT之外,还有Avalonia/Uno/MAUI可以跨平台,但是,听说rust性能高,而且对申明式UI很感兴趣,想了解下Slint与C#系的Xaml有何不同。

开始

学习视频

https://www.bilibili.com/video/BV1r14y1k7T5

IDE选择

IDE可以选择vscoderustrover,这里,我选择rustrover

环境配置

rust安装

IDE配置

打开RustRover选择上方菜单文件->设置->插件,在marketplace中搜索slint然后点击安装

小试牛刀

按照官网文档指示,新建slint项目要向github拉取模板,由于github经常上不去,所以就没有采用这种做法

我们用另外一种方式:

新建rust项目

bash 复制代码
cargo new slint_first_project

使用rustrover打开刚新建的项目

bash 复制代码
cd slint_first_project
rustrover .

项目结构如下所示:

添加视图并运行

添加slint包的引用

bash 复制代码
cargo add slint

添加build-dependencies

打开Cargo.toml,添加如下内容:

toml 复制代码
[build-dependencies]
slint-build = "1.9.2"

最后Cargo.toml内容如下所示:

添加视图(.slint)

在与src同级的目录添加views文件夹,用于存放.slint文件:

views文件夹中添加MyWindow.slint文件:

MyWindow.slint文件中写入如下申明式UI代码:

json 复制代码
export component MyWindow inherits Window {
    title: "this is my window";
    height: 600px;
    width: 1000px;

    GridLayout {
        spacing: 10px;
        Row{
            Rectangle {
            height: 30px;
            background: red;
            Text {
               text: "top";
                 }
            }
        }
        Row{
            Rectangle {
            background: gray;
            Text {
               text: "center";
                 }
            }

        }
         Row{
            Rectangle {
            height: 30px;
            background: blue;
            Text {
               text: "bottom";
                 }
            }

         }
    }
}

添加build.rs

添加这个,告知主窗体的slint文件在哪里

Cargo.toml中添加build.rs,并写入如下代码:

rust 复制代码
fn main(){
    slint_build::compile("views/MyWindow.slint").unwrap()
}

注意路径,要指向刚新建的MyWindow.slint

在src/main.rs中编写启动函数

rust 复制代码
slint::include_modules!();//让系统知道MyWindow从哪里来的
fn main() {
    MyWindow::new().unwrap().run().unwrap()
}

运行项目

rust 复制代码
cargo run

运行效果如下所示:

相关推荐
2501_9262279433 分钟前
.Net程序员就业现状以及学习路线图(四)
学习·.net
滴滴滴嘟嘟嘟.1 小时前
Qt自定义列表项与QListWidget学习
开发语言·qt·学习
Yvonne爱编码1 小时前
零基础学习数据采集与监视控制系统SCADA
学习·信息可视化·信息与通信·数据可视化
肥肠可耐的西西公主2 小时前
后端(JDBC)学习笔记(CLASS 1):基础篇(一)
笔记·学习
励志不掉头发的内向程序员2 小时前
从零开始的python学习——文件
开发语言·python·学习
悠哉悠哉愿意3 小时前
【数学建模学习笔记】无监督聚类模型:分层聚类
笔记·python·学习·数学建模
北冥电磁电子智能4 小时前
江协科技STM32学习笔记补充之004
笔记·科技·学习
一个响当当的名号4 小时前
c++primer 个人学习总结-模板和泛型编程
开发语言·c++·学习
落羽的落羽4 小时前
【C++】C++11的可变参数模板、emplace接口、类的新功能
开发语言·c++·学习
滴滴滴嘟嘟嘟.4 小时前
Qt对话框与文件操作学习
开发语言·qt·学习