【LVGL】SquareLine Style设置

[复制链接]
查看219 | 回复2 | 2024-6-26 18:43:15 | 显示全部楼层 |阅读模式

本帖最后由 楚华 于 2024-6-27 06:51 编辑

本帖最后由 楚华 于 2024-6-26 22:37 编辑

本帖最后由 楚华 于 2024-6-26 20:31 编辑

本帖最后由 楚华 于 2024-6-26 20:28 编辑

本帖最后由 楚华 于 2024-6-26 19:38 编辑

一个好看的界面就全靠Style设置了

这里有各种状态选择,可以根据不同状态设置不同样式 image.png

Default:界面默认样式

Checked:被选中时

Pressed:当用户按下(但尚未释放)

Disabled:禁用状态

Edited:编辑状态

Scrolled:被滚动时状态

Focused:接收到键盘焦点时

Focus Key:当元素通过键盘快捷键或某种特定的键盘操作获得焦点时的状态

Checked Focused:被选中并且同时获得键盘焦点时

Checked Pressed:当用户按下(但尚未释放)一个已被选中的复选框或单选框时

Checked Focus_Key:可能表示当复选框或单选框通过某种特定的键盘操作(如快捷键)获得焦点时的状态。

image.png

style main 通常指的是主界面的整体视觉样式

style scrollbar 专门用于定义滚动的视觉样式

background --- 背景

image.png

Bg Radius:背景半径

Bg Color:背景颜色

Alpha:透明度

Theme color:主题颜色

Bg gradiens color:渐变色背景

Theme color:主题颜色

Bg main stop:背景中的某个颜色停止点

Bg gradient stop:渐变色停止点

Clip corner: 裁剪角

Gradient direction:梯度方向

image.png

HOR(Horizontal):代表水平方向的梯度变化

VER(Vertical):代表垂直方向的梯度变化

background image --- 背景图片

image.png

Bg image opa:背景图片不透明度

Bg image recolor:背景图片颜色

Alpha:透明度

Theme color:主题颜色

Bg Image Tiled:将一个较小的背景图像平铺或重复多次,以覆盖较大的区域

Border --- 边框

边框是朝内算的

image.png

Border Color:边框颜色

Alpha:透明度

Theme color:主题颜色

Border width:边框宽度边框是朝内算的

Border side --- 边框的某一边或某几边的具体设置

image.png

NONO:空

LEFT:左侧

RIGHT:右侧

TOP:上 BOTTOM:下 FULL:全部

Outline --- 外轮廓

image.png

Outline Color:轮廓颜色

Alpha:透明度

Theme color:主题颜色

Outline width:轮廓宽度

Outline pad:轮廓线间距

Shadow --- 阴影效果

image.png

Shadow Color:阴影颜色

Alpha:透明度

Theme color:主题颜色

Shadow width:阴影在水平方向和垂直方向上扩展的宽度。简单来说,它决定了阴影的“厚度”或“大小”

Shadow spread:阴影的“扩散”或“偏移”程度

Shadow OX:X轴偏向

Shadow OX:Y轴偏向

Blend --- 两种或多种颜色、材质、效果等的混合或叠加

image.png

Blend opacity:混合不透明度

Blend mode --- 混合模式

image.png

NORMAL:直接显示上层图层的颜色,不受下层影响

ADDITIVE:上层和下层颜色相加,常用于高亮效果

SUBTRACTIVE:上层颜色从下层颜色中减去,可能产生较暗效果

MULTIPLY:上层和下层颜色相乘并除以最大值,常用于阴影或深色效果

Paddings --- 内边距

image.png

Pad Left:左侧

Pad Right:右侧

Pad Top:上

Pad Bottom:下

Text --- 文本

image.png

Text Color:文本颜色

Alpha:透明度

Theme color:主题颜色

Letter spacing:文本中相邻字符之间的距离

Line spacing: 行间距

Text Align --- 文本块水平对齐方式

image.png

AUTO:自动

LEFT:左对齐

RIGHT:右对齐

CENTER:居中

Text Decor --- 用于给文本添加装饰效果

image.png

none:默认值,文本没有装饰效果

underline:给文本添加下划线

Strike through:添加删除线,也称为中线

Text Font --- 字体大小

image.png

回复

使用道具 举报

1084504793 | 2024-6-27 08:51:55 | 显示全部楼层
回复

使用道具 举报

WT_0213 | 2024-6-27 11:20:09 | 显示全部楼层
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则