文章详情 - 宏推科技

收起

控件支持

架构

slint 优点

slint 目标

MCU支持

许可证

合作机构

桌面端举例

支持多语言（Rust/Cpp/Js）,跨平台(嵌入式/桌面/移动/网页），简便易用，高效执行。

slint是一个类似qml的标记语言（xml/css之类方便界面设计的语言），经过编译器slint compile（类似QT的moc/uic/rcc工具）可完整的转换成Cpp或者Rust。其开发方式类似qml+cpp，这得益于slint ui的两位初始创建人来自QT团队。与qt的qml相比，slint有几个优点：全slint代码转换成本地语言、原生多本地语言支持（Rust/Cpp/NodeJs）、无历史包袱。

slint ui 目前版本0.3.4(2023.02),下一版本直接就是1.0正式版(1.0正式版已经发布, 官方说可以用于生产环境了)，从官方的版本记录上看，当前正处版本快速迭代的状态。当前版本UI控件已基本完备，但控制细粒度及美观性还有待改进，相比QT差距较大。

控件支持

架构

slint 优点

流畅：平滑，触摸友好的用户接口
跨平台：目标平台包括嵌入式设备和桌面应用软件(手机和网页)
多语言：可以使用自己擅长的语言API(C++,Rust,JavaScript)
快速设计：适时预览快速迭代

多语言支持的描述，参考官方原文：

We choose to first support this set of languages because it is the implementation language, another low level language, and a dynamic language. We believe that it will be easy to extend the integration into more programming languages later.

slint 目标

slint定位是：一个可多语言可任意显示屏适配的高效流畅的用户图形接口工具包。设计目标包括：

简便：编码或设计人员能有成就感并能享受开发和设计的过程。APIs不管在哪种语言下都保证一致性、简单易用、符合直观感觉。文档介绍API时应注重观念的传授及api如何使用。
轻量：能够适用于几百K的内存及低功耗设备。
本地化：slint支持多种多样的目标平台，从嵌入式设备到桌面应用包括手机和网页。用户和开发者都应感受不到与当前使用平台的差异。不管是外观还是主观感觉还是经验都应符合用户对本地应用的期望。

需要说明的是, slint 虽然支持嵌入设备/桌面应用/移动应用/网页应用。但其支持的重点是嵌入式设备和桌面应用，后期也会将移动应用加入主要支持行列，但网页应用只用作展示使用，不是重点支持对象（官方原文暂时没找到）。

MCU支持

slint-ui是嵌入式开发的福音，抛开rust不说，由于支持cpp，从此再也不用忍受lvgl/minigui之类各种各样的一大票用c搞出来的杂七杂八蹩脚又折磨人的UI框架(c框架心智负担太重，且很少也很难做到界面与逻辑分离，一旦需求变动几乎就是灾难)。也许有人会说既然用cpp了为什么不用QT, QT太庞大，不适合没有操作系统的单片机。那为什么不用QT for mcu呢？qt for mcu我没用过，但它是商业软件不开源，slint-ui支持GPLv3许可证。

当前版本下mcu相关API只在rust中可用，以后会开发c++版本的api，官方是这样说的：

These new platform abstraction and rendering APIs are only available for the Rust programming language today; C++ is in our future plans

关于移植到MCU相关的信息可以看一下官方文章及项目例程：

slint::docs::mcu - Rust

Porting the Slint UI Toolkit to a Microcontroller with 264K RAM — Slint Blog

slint-mcu-rust-template.git

00:28

00:11

许可证

采用GPLv3以及商业许可证，参考：

合作机构

目前，slint 作为银级会员加入了Rust基金会，其相关合作机构从官网展示的有如下几个：

桌面端举例

本例采用vscode+slint+rust开发:

main.slint:

import {    
    GroupBox, LineEdit, Button, 
    Slider, SpinBox,
    StandardTableView    
} from "std-widgets.slint";

MainWindow := Window{
    title: "Main Window";
    width: 600px;
    height: 500px;
    VerticalLayout { 
        // line comment
        /* this is a 
            /* single */ 
            comment 
        */
        spacing: 5px;
        padding-left: 25px;
        padding-right: 25px;
        alignment: center;
        Button {
            text: "Click Me";
            clicked => { self.text = "Clicked"; }
        }
        Text { 
            height: 50px;
            font-size: 27px;
            font-weight: 700;
            color: #6776FF;  
            text: "line text";
         }
        HorizontalLayout {  
            width: parent.width;
            height: 25px;  
            alignment: center; 
            spacing: 5px;   
            
            Rectangle { 
                width: 24px;
                height: 24px;
                border-radius: width / 2;
                background: red;
                
                Rectangle { 
                    width: 12px;
                    height: 12px;
                    border-radius: width / 2;
                    background: white;
                    x: parent.width/4;
                    y: parent.height/4;
                    
                }
             }         
            Slider {
                //width: parent.width * 3 / 8;
                height: parent.height;
                value: 42;
            }
            SpinBox {
                //width: parent.width * 3 / 8;
                height: parent.height;
                value: 42;
            }
        }
        GroupBox{
            title:"Group Box";
            height: 100px;            
            LineEdit {
                placeholder-text: "enter text";
            }
        }
        
        Rectangle  {
            width: parent.width * 3 / 4;
            height: 202px;
            border-color: #86e086;
            border-width: 1px;
            StandardTableView {
                width: parent.width;
                height: 200px;
                columns: [
                    { title: "colum 1" },
                    { title: "colum 2" },
                ];
                rows: [
                    [{ text: "item 11" }, { text: "item 12" },],
                    [{ text: "item 21" }, { text: "item 22" },],
                    [{ text: "item 31" }, { text: "item 32" },]
                ];
            }
        }  
        
        HorizontalLayout {
            spacing: 5px;
            height: 30px;
            Rectangle { background: red; width: 20px; }
            Rectangle { background: blue; min-width: 10px; }
            Rectangle { background: yellow; horizontal-stretch: 1; }
            Rectangle { background: green; horizontal-stretch: 2; }
        }
    }
}

main.rs

slint::include_modules!();

fn main() {
    MainWindow::new().run();
}

build.rs

fn main() {
    slint_build::compile("ui/main.slint").unwrap();
}

cargo.toml

[package]
name = "mytest"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
slint = "0.3.4"
[build-dependencies]
slint-build = "0.3.4"