1. 首页
  2. 应用软件
  3. Rust

使用slint建立rust GUI程序

1、参考资料

文档:https://slint-ui.com/releases/0.2.1/docs/rust/slint/

仓库:https://github.com/slint-ui/slint

模板:https://github.com/slint-ui/slint-rust-template

示例:https://github.com/slint-ui/slint/tree/master/examples

VSCode插件:slint语法高亮并可以进行界面预览 https://marketplace.visualstudio.com/items?itemName=Slint.slint

2、建立项目
  • 新建项目
cargo new test
  • 添加库
[dependencies]
slint = "0.2.1"

  • main中添加代码:
fn main() {
    MainWindow::new().run();
}


slint::slint!{
    MainWindow := Window {
        Text{
            text: "Hello, world";
            color:blue;
        }
    }
}   

上述是将界面slint代码嵌入在rust同一个文件中。

  • 运行
cargo run --target i686-pc-windows-gnu

注:此处需要注意平台版本需要对应,如我的本机安装的是Qt mingw32版本,因此这里需要选择构建目标为:“i686-pc-windows-gnu”

界面如下:

image-20220314223526606

3、界面文件与rust代码分开
  • cargo.toml添加
[build-dependencies]
slint-build = "0.2.1"
  • 添加界面文件,新建ui/main.slint文件
import {GroupBox,LineEdit} from "std-widgets.slint";

MainWindow := Window{
    title: "Main Window";

    VerticalLayout { 

        alignment:start;
        padding-left: 25px;
        padding-right: 25px;

        Text { 
            font-size: 27px;
            font-weight: 700;
            color: #6776FF;  
         }

        GroupBox{
            title:"lineEdit";
            LineEdit {
                placeholder-text: "enter text";
            }
        }

    }
}
  • 添加build.rs文件
fn main() {
    slint_build::compile("ui/main.slint").unwrap();
}
  • 主文件
slint::include_modules!();

fn main() {
    MainWindow::new().run();
}
  • 建立好的项目文件结构如下:

    image-20220315081751937

  • 运行

cargo run --target i686-pc-windows-gnu

界面显示如下:

image-20220314230218557

4、参考项目
  • Cargo GUI

    https://github.com/slint-ui/cargo-ui

    image-20220314233151255

  • iot-dashboard

https://github.com/slint-ui/slint/tree/master/examples/iot-dashboard

image-20220314231401603

版权声明:本文为博主原创文章,转载请声明。

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

MakerInChina
邮箱:bally909@aliyun.com