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

运行效果如下所示:

相关推荐
sealaugh325 小时前
aws(学习笔记第四十八课) appsync-graphql-dynamodb
笔记·学习·aws
水木兰亭6 小时前
数据结构之——树及树的存储
数据结构·c++·学习·算法
鱼摆摆拜拜6 小时前
第 3 章:神经网络如何学习
人工智能·神经网络·学习
aha-凯心6 小时前
vben 之 axios 封装
前端·javascript·学习
ytttr87310 小时前
matlab通过Q学习算法解决房间路径规划问题
学习·算法·matlab
听风ツ13 小时前
固高运动控制
学习
西岭千秋雪_13 小时前
Redis缓存架构实战
java·redis·笔记·学习·缓存·架构
XvnNing13 小时前
【Verilog硬件语言学习笔记4】FPGA串口通信
笔记·学习·fpga开发
牛奶咖啡1313 小时前
学习设计模式《十六》——策略模式
学习·设计模式·策略模式·认识策略模式·策略模式的优缺点·何时选用策略模式·策略模式的使用示例
The_cute_cat14 小时前
JavaScript的初步学习
开发语言·javascript·学习