您当前的位置:首页 >> 快讯 >> 
单片机低代码交互UI制作 - LVGL+Squareline+Arduino平台 学习记录(4)

时间:2023-07-08 16:43:49    来源:哔哩哔哩

接上篇,继续Squareline的属性栏


【资料图】

3、Transform - 变换,词穷。。主要是部件的位置、大小信息。

X、Y,是以部件中心为原点的相对父级位移,是的,不是的相对位置,也不是绝对位置。

当X、Y为0时,部件并不一定是在左上角,而是靠Align(对齐)来确定,Align为Center(中心),则部件在父级容器的中心,X、Y加减是以这个中心来移动的。如果Align为BOTTOM MID,则部件在父级容器的中下,如下图所示。

X、Y输入框有两个单位,px和%,px是像素,%则是相对父级容器百分之多少,例如,X=10%,则实际移动为:父级容器宽度*10%,-10%和Y同理。注意部件是可以移动到显示区域外部的。

Width(部件宽度)、Height(部件高度),三个单位px、%、Content、fr,px:像素、%:相对父容器百分比,Content:和值无关,在保证正常显示的前提下,尽量减小宽度/高度(类似于自适应大小,由内部子级部件确定),我只在LVGL文档中找到了这个玩意,实际效果也是这效果,对不对就不一定了,见下图这是两个宽度为1Content,高度为50px的按钮。

fr:仅在父级为flex弹性布局时才有,这是一个比例。举个例子:横向排列状态,同一行内有两个部件,一个宽度为2fr,另一个为3fr,那么2fr的部件宽度则为:2/(2+3)*100%*父级容器宽度,也就是40%,与百分比不同的是,百分比可超出显示区域,而fr则由于基数为100%,所以不会,同时如果混用,其它三个单位导致超出范围后,以fr为单位的部件会显示不出来。

Align - 对齐:X、Y为0时,部件相对父容器的位置。

CENTER:中心,TOP LEFT:左上,TOP MID:中上,TOP RIGHT:右上,BOTTOM LEFT:左下,BOTTOM MID:中下,BOTTOM RIGHT:右下,LEFT MID:中左,RIGHT MID:中右。

标志

滚动条显示模式:OFF - 不显示,ON - 常显,ACTIVE - 激活时显示,AUTO - 自动

滚动方向:TOP:向上,LEFT:向左,BOTTOM:向下,RIGHT:向右,HOR:横向,VER:纵向,ALL:全向。

状态:部件状态可处于以下的一个或组合

Checked:切换或选中的状态

Disabled:禁用,禁用状态

Focused:聚焦,通过键盘或编码器对焦,或通过触摸板/鼠标单击。

Pressed:被按下

User:自定义的部分

基础的属性就到这,每个部件还有各自的属性,同时每个部件的样式也有所差别,下面先写下样式中相同的东西,随后将详细到不同种类的部件进行扩展。

STYLE SETTINGS 样式设置

STATE - 状态:部件会有以下几种状态,每种状态都可以设置一种样式,当部件处于此状态时便显示对应的效果,以呈现出更好的视觉体验。

基础样式基本就这些了,后面分开说每个部件,因为有属性也有样式,可能会有点乱。(属性是部件运行的主要参数,样式是外观样貌)

标签: