91欧美超碰AV自拍|国产成年人性爱视频免费看|亚洲 日韩 欧美一厂二区入|人人看人人爽人人操aV|丝袜美腿视频一区二区在线看|人人操人人爽人人爱|婷婷五月天超碰|97色色欧美亚州A√|另类A√无码精品一级av|欧美特级日韩特级

0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內(nèi)不再提示

Rust UI框架:Slint UI簡單入門

jf_wN0SrCdH ? 來源:Rust語言中文社區(qū) ? 2023-05-12 16:03 ? 次閱讀
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

Slint 1.0 已發(fā)布,標志著項目已順利從開發(fā)階段“畢業(yè)”,可正式用于生產(chǎn)環(huán)境。

Slint 可用于為各種操作系統(tǒng)處理器架構(gòu)開發(fā) UI,包括 Linux、macOS、Windows、WebAssembly、Blackberry QNX 和裸機。它允許 JavaScript 開發(fā)人員為嵌入式和桌面應用程序創(chuàng)建原生用戶界面。

Slint UI 介紹

Slint 曾經(jīng)被稱為 SixtyFPS,特點是既快又小,是一個 Rust 編寫的綜合性 UI 工具包,用于為桌面和嵌入式設備構(gòu)建原生用戶界面。其開發(fā)團隊希望將 Slint 打造成下一代 GUI 工具包,因此從頭開始構(gòu)建項目時就考慮了可擴展性、包容性、工具性和跨平臺兼容性。

  • 流暢:平滑,觸摸友好的用戶接口

  • 跨平臺:目標平臺包括嵌入式設備和桌面應用軟件(手機和網(wǎng)頁)

  • 多語言:可以使用自己擅長的語言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 的定位是一個支持多語言、適配任意顯示屏、且高效流暢的用戶圖形接口工具包。設計目標包括:

  • 可擴展:在連接到設備的任何屏幕上運行,從臺式計算機到低功耗嵌入式設備

  • 輕量級:能夠在幾百KB內(nèi)存的場景中運行,并且需要很少的處理能力。

  • 原生支持:Slint 支持多種目標平臺,從嵌入式設備到桌面應用,包括移動設備和 Web。

開發(fā)團隊表示,使用 Slint 構(gòu)建的圖形應用程序可以在內(nèi)存小于 300 kB 的系統(tǒng)上運行,例如包含 264kB RAM 和 ARM Cortex-M0+ 處理器的 Raspberry Pi Pico。因此,Slint 非常適合為嵌入式設備應用程序開發(fā) UI。

e32d15be-f09a-11ed-90ce-dac502259ad0.png

Slint 使用了聲明式編程來簡化 UI 的開發(fā),優(yōu)化應用程序開發(fā)和性能的方法是:

  • 用聲明式語言來描述 UI,使用的語法提供了一種廣泛的方式來描述各種圖形元素,同時易于閱讀、編寫和學習

  • Slint 編譯器對描述 UI 的代碼進行優(yōu)化并翻譯成原生代碼

  • 采用任何語言編寫的業(yè)務邏輯,可通過使用 Slint 提供的特定于語言的 API 與 UI 連接

整體架構(gòu)

e353995a-f09a-11ed-90ce-dac502259ad0.png

控件支持

e36e1190-f09a-11ed-90ce-dac502259ad0.jpg

示例:

  • 不同平臺的原生桌面小部件(Windows、macOS、Linux)

e3887ed6-f09a-11ed-90ce-dac502259ad0.png

e39e3d66-f09a-11ed-90ce-dac502259ad0.png

e3b4ba96-f09a-11ed-90ce-dac502259ad0.png

  • WebAssembly

e3c7403a-f09a-11ed-90ce-dac502259ad0.png

Slint 完全采用 Rust 實現(xiàn),同時支持不同的編程語言,目前為 C++、JavaScript 和 Rust 提供了 API。

詳情查看發(fā)布公告:https://slint-ui.com/blog/announcing-slint-1.0.html

MCU支持

slint-ui 是嵌入式開發(fā)的福音,基于 Rust ,使用了聲明式編程來簡化 UI 的開發(fā),從此再也不用忍受 lvgl/minigui 之類各種各樣的一大票用 c 搞出來的雜七雜八蹩腳又折磨人的 UI 框架(c 框架心智負擔太重,很難做到界面與邏輯分離,一旦需求變動幾乎就是災難)。也許有人會問為什么不用 QT?QT 太龐大,不適合沒有操作系統(tǒng)的單片機,再者QT For MCU是商業(yè)軟件不開源,slint-ui 支持 GPLv3 許可證(采用GPL協(xié)議,總感覺有點怪怪的,不知道后續(xù)是否會步QT后塵全面商用收費)

關(guān)于移植到 MCU 相關(guān)的信息可以看一下官方文章及項目例程:

  1. Slint::mcu - Rust:https://slint-ui.com/releases/0.3.0/docs/rust/slint/docs/mcu/index.html

  2. Porting the Slint UI Toolkit to a Microcontroller with 264K RAM — Slint Blog:https://slint-ui.com/blog/porting-slint-to-microcontrollers.html

  3. Slint-mcu-rust-template.git:https://github.com/slint-ui/slint-mcu-rust-template.git

界面展示:
打印機:【查看在線交互演示】:https://slint-ui.com/releases/0.3.0/demos/printerdemo

e3ed93b6-f09a-11ed-90ce-dac502259ad0.png

Rust Slint 簡單入門

1. slint 界面代碼嵌入在 Rust 中

新建項目

cargo new rust-ui

添加庫 TOML

[dependencies]
slint = "1.0.0"

main.rs中添加代碼:

fn main() {
    // 運行slintUI窗體
    MainWindow::new().run();
}
// slint宏,創(chuàng)建 UI
slint::slint!{
    export component MainWindow inherits Window {
        title: "Main Window";
        width: 600px;
        height: 500px;
        // 定義一個 Text 組件
        Text{
            text: "Hello, world";
            color:blue;
        }
    }
}

上述是將界面 slint 代碼嵌入在 rust 同一個文件中,slint 聲明式編程來簡化 UI 的開發(fā),有 Flutter、Compose 以及其他前端開發(fā)經(jīng)驗同學很容易上手。更多組件的使用的請參考開發(fā)文檔和 Demo示例

2、界面 slint 文件與 Rust 代碼分開

cargo.toml 添加

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

添加界面文件,新建 ui/main.slint 文件

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

export component MainWindow inherits Window {
    title: "Main Window";
    width: 600px;
    height: 500px;

    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";
            }
        }

        Button {
            text: "Click Me";
            clicked => { self.text = "Clicked"; }
        }

    }
}

添加 build.rs 文件

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

main.rs 主文件

slint::include_modules!();

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

建立好的項目文件結(jié)構(gòu)如下:

e405cb0c-f09a-11ed-90ce-dac502259ad0.png

執(zhí)行命令:cargo run,運行效果如下圖,以上所有程序開發(fā)均在vs code下完成(依賴slint官方插件)

注:VSCode插件:slint 語法高亮并可以進行界面預覽 https://marketplace.visualstudio.com/items?itemName=Slint.slint

e41a8d08-f09a-11ed-90ce-dac502259ad0.png

總結(jié)

Slint 是一個 Rust 編寫的綜合性 UI 工具包,定義和提供一系列方便構(gòu)建 UI 的組件,使用了聲明式編程來簡化 UI 的開發(fā),可用于為桌面和嵌入式設備構(gòu)建原生用戶界面。使用 Slint 構(gòu)建的圖形應用程序可以在內(nèi)存小于 300 kB 的系統(tǒng)上運行,實事求是的講,內(nèi)存較大的嵌入式設備上 Android 更占優(yōu)勢,但是低內(nèi)存的嵌入式設備(比如單片機)上 Slint 有很大機會,總之,Slint 非常適合為嵌入式設備應用程序開發(fā) UI

審核編輯 :李倩


聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學習之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • 框架
    +關(guān)注

    關(guān)注

    0

    文章

    404

    瀏覽量

    18429
  • 嵌入式設備
    +關(guān)注

    關(guān)注

    0

    文章

    121

    瀏覽量

    17723
  • GUI
    GUI
    +關(guān)注

    關(guān)注

    3

    文章

    697

    瀏覽量

    43485

原文標題:Rust UI 框架:Slint UI 簡單入門

文章出處:【微信號:Rust語言中文社區(qū),微信公眾號:Rust語言中文社區(qū)】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。

收藏 人收藏
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

    評論

    相關(guān)推薦
    熱點推薦

    基于i.MX RT106V跨界MCU的智能語音UI邊緣就緒解決方案

    基于i.MX RT106V跨界MCU的智能語音UI邊緣就緒解決方案 在當今智能化的時代,智能語音交互技術(shù)在工業(yè)和物聯(lián)網(wǎng)領域的應用越來越廣泛。NXP推出的基于i.MX RT106V跨界MCU的智能語音
    的頭像 發(fā)表于 12-24 17:15 ?669次閱讀

    RUI Builder 圖形化UI設計工具

    RUI Builder 圖形化UI設計工具 該軟件為圖形化UI設計軟件,搭配瑞佑圖形處理器,輕松設計UI界面!主要特色功能: 在PC上直接設計界面,再生成UI渲染源碼(.c),程序中
    發(fā)表于 12-12 20:14

    分享---儲能UI界面能量流動動畫實現(xiàn)方法

    本文分享 工商業(yè)儲能設備的UI界面中如何實現(xiàn) 能量流動的動畫效果。 本例子效果 基于拓普微工業(yè)級 7寸屏電容串口屏(HMT070ETA-D型號)實現(xiàn): 第1步:建立工程和頁面 使用SGTools新建
    發(fā)表于 09-02 18:22

    分享---簡單快速實現(xiàn)烘烤設備UI界面的方法

    本文分享下,如何簡單快速的設計出工業(yè)烘烤設備的UI界面方法, 借助 \"墨刀\" 界面原型設計工具,設計烘烤機主界面圖片。 使用拓普微 SGTools開發(fā)工具,建立工程和頁面
    發(fā)表于 08-26 11:58

    HarmonyOS AI輔助編程工具(CodeGenie)UI生成

    UI Generator基于BitFun Platform AI能力平臺,用于快速生成可編譯、可運行的HarmonyOS UI工程,支持基于已有UI布局文件(XML),快速生成
    發(fā)表于 07-10 11:51

    【 HarmonyOS 5 入門系列 】鴻蒙HarmonyOS示例項目講解

    【 HarmonyOS 5 入門系列 】鴻蒙HarmonyOS示例項目講解 ##鴻蒙開發(fā)能力 ##HarmonyOS SDK應用服務##鴻蒙金融類應用 (金融理財# 一、前言:移動開發(fā)聲明式 UI
    的頭像 發(fā)表于 07-07 11:57 ?1086次閱讀
    【 HarmonyOS 5 <b class='flag-5'>入門</b>系列 】鴻蒙HarmonyOS示例項目講解

    請問如何通過OpenVINO?加速啟用穩(wěn)定的擴散 Web UI?

    無法運行具有OpenVINO?加速的穩(wěn)定擴散 Web UI。
    發(fā)表于 06-24 06:48

    ArkUI介紹

    ArkUI(方舟UI框架)為應用的UI開發(fā)提供了完整的基礎設施,包括簡潔的UI語法、豐富的UI功能(組件、布局、動畫以及交互事件),以及實時
    發(fā)表于 06-24 06:41

    UI開發(fā)概述

    使用UI開發(fā)框架開發(fā)應用時,主要涉及如下開發(fā)過程。開發(fā)者可以先通過第一個入門實例了解整個應用的UI開發(fā)過程。 任務簡介相關(guān)指導學習ArkTS介紹了ArkTS的基本語法、狀態(tài)管理和渲
    發(fā)表于 06-24 06:36

    HarmonyOS NEXT應用元服務布局優(yōu)化ArkUI框架執(zhí)行流程

    一、 ArkUI框架執(zhí)行流程 在使用ArkUI開發(fā)中,我們通過布局組件和基礎組件進行界面描述,這些描述會呈現(xiàn)出一個組件樹的結(jié)構(gòu),基礎組件在其中為葉子結(jié)點,布局組件則是中間節(jié)點,可以把這棵樹稱之為
    發(fā)表于 06-23 09:41

    使用 ai cude 里面自帶的案例訓練UI顯示異常的原因?怎么解決?

    案例的配置是默認的,顯示訓練ui更改顯示異常
    發(fā)表于 06-23 06:21

    UIAbility組件與UI的數(shù)據(jù)同步介紹

    UIAbility組件與UI的數(shù)據(jù)同步 基于當前的應用模型,可以通過以下幾種方式來實現(xiàn)UIAbility組件與UI之間的數(shù)據(jù)同步。 使用EventHub進行數(shù)據(jù)通信:在基類Context中提供了
    發(fā)表于 05-16 06:10

    基于RV1126開發(fā)板實現(xiàn)簡單UI開發(fā)示例

    本方案為最簡單UI開發(fā)示例,已為用戶初步構(gòu)建一個基本的應用工程;準備好我司的easyeai-api鏈接調(diào)用;準備好UI的開發(fā)環(huán)境。其目的在于方便用戶馬上進行帶有界面交互的產(chǎn)品開發(fā),無須關(guān)心工程組建。
    的頭像 發(fā)表于 04-18 16:07 ?1100次閱讀
    基于RV1126開發(fā)板實現(xiàn)<b class='flag-5'>簡單</b>的<b class='flag-5'>UI</b>開發(fā)示例

    RV1126 實現(xiàn)簡單UI開發(fā)示例

    在RV1126上實現(xiàn)簡單UI開發(fā)實例
    的頭像 發(fā)表于 04-09 16:08 ?1133次閱讀
    RV1126 實現(xiàn)<b class='flag-5'>簡單</b>的<b class='flag-5'>UI</b>開發(fā)示例

    AWTK:一鍵切換皮膚,打造個性化UI

    視頻推薦想讓你的應用在不同場景下都能完美呈現(xiàn)嗎?皮膚切換功能必不可少!本文將介紹AWTK,一款強大的GUI框架,它通過內(nèi)置資源管理和優(yōu)化緩存,輕松實現(xiàn)皮膚切換功能。前言當今的UI應用中,為了滿足
    的頭像 發(fā)表于 04-09 13:00 ?920次閱讀
    AWTK:一鍵切換皮膚,打造個性化<b class='flag-5'>UI</b>