設(shè)想

Target以LVGL為目標(biāo)，語(yǔ)法以CSS為Reference。

CSS 規(guī)范

略

CSS規(guī)范最強(qiáng)大的屬于CSS自身的屬性很多，可以通過(guò)class和偽屬性選擇器對(duì)UI進(jìn)行直接控制。

QML規(guī)范

ApplicationWindow {visible: truewidth: Constants.widthheight: Constants.heighttitle: qsTr("Coffee")ApplicationFlowForm {id: applicationFlowstate: "initial"property int animationDuration: 400choosingCoffee.brewButtonSelection.onClicked: {applicationFlow.state = "settings"}}  Image {id: rootsource: "images/icons/coffees/cappucino.png"signal clickedproperty int duration: 250property alias text: label.textMouseArea {anchors.fill: parentonClicked: root.clicked()onPressed: {glow.visible = trueanimation1.start()animation2.start()}}Rectangle {id: glowvisible: falsewidth: 250height: 250color: "#00000000"radius: 125scale: 1.05border.color: "#ffffff"}Label {id: labelx: 292y: 252text: qsTr("Label")anchors.horizontalCenter: parent.horizontalCentercolor: "#443224"font.family: Constants.fontFamilyfont.pixelSize: 28}}}

Slint Demo

Slint本身來(lái)源于QML, flutter 等項(xiàng)目，吸收優(yōu)化得到的Design。

import { Button } from "std-widgets.slint";
export component MainWindow inherits Window {height: 720px;width: 1200px;title: "Button!";Button { height: 66px;width: 310px;icon: @image-url("../../imgs/rust.png");text: "I am a Button";clicked => {self.text = "Clicked!";self.width = 360px;}}GridLayout {spacing: 10px;padding: 4px;//使用Row進(jìn)行行聲明Row{Rectangle { background: red; }Rectangle { background: yellow;}Rectangle { background: pink; }}Row{Rectangle { background: white; colspan: 2; }Rectangle { background: green; colspan: 1; col: 2;} }Rectangle { background: violet; colspan: 3;row:3;}Rectangle { background: orange; colspan: 3;row:2;}}
}

QML和Slint是將CSS的屬性選擇等能力，作為Object的屬性存在，單獨(dú)設(shè)定。雖然一定程度上解決了UI復(fù)用問(wèn)題，但是不靈活。

QML勝在周邊成熟，與Qt Object高度綁定，代碼融合比較簡(jiǎn)單。Slint反而優(yōu)點(diǎn)不倫不類(lèi)，沒(méi)有生態(tài)支撐，但是IDE配套做的不錯(cuò)，比LVGL好太多。

LVGL規(guī)范

• Demos https://docs.lvgl.io/master/examples.html
• Object基礎(chǔ)屬性 https://docs.lvgl.io/master/widgets/obj.html#overview
• Theme和定制 https://docs.lvgl.io/master/overview/style.html#themes

# demo1, label
screen*colorlabel*text*color# demo2, button
screenbutton*pos*size*event  # <== 這里進(jìn)行事件綁定  label*text*align# demo3, flex
screenobject1*size*align*flexbutton*N*sizelabel*text*alginobject2*size*align*flexbutton*N*sizelabel*text*algin# demo4, grid
screenobject*grid*size*algin*layout_grid    button*Nlabel*text*align     # style, == class
style*radius*bg_opa*bg_color*border_width*border_color# ...screenobject*styleimage*algin# theme
default_themetheme2stylescreenbutton   *alignlabel*textbutton(theme2)  # change theme*alignlabel*text

總結(jié)：

1. Screen為root, 但是可以有多個(gè)，每次選一個(gè)作為default。
2. 每個(gè)Screen有2個(gè)Layer層，但是用戶一般只用top layer。(一般coding時(shí)，不用在乎這個(gè)問(wèn)題)
3. Layer(screen)內(nèi)部可以自由組合 Object/Widgets, 每個(gè)Object/Widget 可以自由設(shè)定Layout為Grid/Flex/Absolute(默認(rèn))
4. 每個(gè)Object/Widget都有默認(rèn)的style(來(lái)源于默認(rèn)的theme)，可以自己custom style給object/widget使用。
5. Theme是各種style的集合，也可以繼承或者自己custom.
6. 字體和圖片需要轉(zhuǎn)換后才能使用。中文支持需要添加中文字體。屏幕鍵盤(pán)默認(rèn)不支持中文。

與QML/Slint比，沒(méi)有DSL部分，全是C/C++ Code生成，也沒(méi)有Nodejs/Go/Rust等binding部分(部分有，但不成熟)。有theme和style部分，很接近CSS的味道，但是沒(méi)有DSL的加持，寫(xiě)起來(lái)很痛苦。

一句話：LVGL是個(gè)靈活的胖子!

想法

Idea Target

鑒于Slint和QML的授權(quán)協(xié)議，在嵌入式設(shè)備上收費(fèi)，還有Rust/Qt的依賴(lài)問(wèn)題，如果能有一個(gè)DSL和對(duì)應(yīng)的C code tool, LVGL應(yīng)該回是一個(gè)不錯(cuò)的選擇。

所以，向借鑒Slint的VS Code插件，能不能仿照Vue、React一類(lèi)的用法，將CSS和template一起渲染為C Code, 并綁定event，還支持UI的preview in design？

如果能做這樣一個(gè)插件，并且提供LVGL工具庫(kù)，支持UI動(dòng)態(tài)Load, 這將會(huì)是一個(gè)非常不錯(cuò)的主意，并且對(duì)Coding有很大的幫助。

如果這個(gè)工具支持的DSL語(yǔ)法類(lèi)似QML更好，不支持也盡量類(lèi)似。

以上，于2023年11月28日。

Design

1. [v] Kotlin DSL有類(lèi)似的感覺(jué)
2. 自己做解析，難以支持語(yǔ)法檢查和擴(kuò)展
3. [?] 不知道QML的那種解析怎么實(shí)現(xiàn)的
4. [v] template 模擬vue/json那種

參考：Groovy => Gradle

使用：Kotlin native + kts + ffi(DSL+LVGL)

• 先實(shí)現(xiàn)PC平臺(tái)的調(diào)用
• 然后做一個(gè)xxx.lvgl的實(shí)時(shí)預(yù)覽和代碼生成
• 然后做一個(gè)開(kāi)源庫(kù)，LVGL輔助庫(kù)函數(shù)

deadline: 2024/06/28, name: crui_lvgl