学生制作设计个人网站,淘宝客导购网站怎么建设,电子邮件营销,网站的域名在哪里看设想
Target以LVGL为目标#xff0c;语法以CSS为Reference。
CSS 规范
略
CSS规范最强大的属于CSS自身的属性很多#xff0c;可以通过class和伪属性选择器对UI进行直接控制。
QML规范
ApplicationWindow {visible: truewidth: Constants.widthheight: Constants.height…设想
Target以LVGL为目标语法以CSS为Reference。
CSS 规范
略
CSS规范最强大的属于CSS自身的属性很多可以通过class和伪属性选择器对UI进行直接控制。
QML规范
ApplicationWindow {visible: truewidth: Constants.widthheight: Constants.heighttitle: qsTr(Coffee)ApplicationFlowForm {id: applicationFlowstate: initialproperty int animationDuration: 400choosingCoffee.brewButtonSelection.onClicked: {applicationFlow.state settings}} Image {id: rootsource: images/icons/coffees/cappucino.pngsignal 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: #00000000radius: 125scale: 1.05border.color: #ffffff}Label {id: labelx: 292y: 252text: qsTr(Label)anchors.horizontalCenter: parent.horizontalCentercolor: #443224font.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.htmlObject基础属性 https://docs.lvgl.io/master/widgets/obj.html#overviewTheme和定制 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是个灵活的胖子!
想法
Idea Target
鉴于Slint和QML的授权协议在嵌入式设备上收费还有Rust/Qt的依赖问题如果能有一个DSL和对应的C code tool, LVGL应该回是一个不错的选择。
所以向借鉴Slint的VS Code插件能不能仿照Vue、React一类的用法将CSS和template一起渲染为C Code, 并绑定event还支持UI的preview in design
如果能做这样一个插件并且提供LVGL工具库支持UI动态Load, 这将会是一个非常不错的主意并且对Coding有很大的帮助。
如果这个工具支持的DSL语法类似QML更好不支持也尽量类似。
以上于2023年11月28日。
Design
[v] Kotlin DSL有类似的感觉 自己做解析难以支持语法检查和扩展[?] 不知道QML的那种解析怎么实现的[v] template 模拟vue/json那种
参考Groovy Gradle
使用Kotlin native kts ffi(DSLLVGL)
先实现PC平台的调用然后做一个xxx.lvgl的实时预览和代码生成然后做一个开源库LVGL辅助库函数
deadline: 2024/06/28, name: crui_lvgl
