crui_lvgl 一个LVGL的DSL辅助工具的设想

设想

Target以LVGL为目标，语法以CSS为Reference。

CSS 规范

略

CSS规范最强大的属于CSS自身的属性很多，可以通过class和伪属性选择器对UI进行直接控制。

QML规范

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本身来源于QML, flutter 等项目，吸收优化得到的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进行行声明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的属性存在，单独设定。虽然一定程度上解决了UI复用问题，但是不灵活。

QML胜在周边成熟，与Qt Object高度绑定，代码融合比较简单。Slint反而优点不伦不类，没有生态支撑，但是IDE配套做的不错，比LVGL好太多。

LVGL规范

Demos https://docs.lvgl.io/master/examples.html
Object基础属性 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  # <== 这里进行事件绑定  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

总结：

Screen为root, 但是可以有多个，每次选一个作为default。
每个Screen有2个Layer层，但是用户一般只用top layer。(一般coding时，不用在乎这个问题)
Layer(screen)内部可以自由组合 Object/Widgets, 每个Object/Widget 可以自由设定Layout为Grid/Flex/Absolute(默认)
每个Object/Widget都有默认的style(来源于默认的theme)，可以自己custom style给object/widget使用。
Theme是各种style的集合，也可以继承或者自己custom.
字体和图片需要转换后才能使用。中文支持需要添加中文字体。屏幕键盘默认不支持中文。

与QML/Slint比，没有DSL部分，全是C/C++ Code生成，也没有Nodejs/Go/Rust等binding部分(部分有，但不成熟)。有theme和style部分，很接近CSS的味道，但是没有DSL的加持，写起来很痛苦。

一句话：LVGL是个灵活的胖子!