此外,必须先对齐圆弧,然后设置标签对齐(图标对齐设置)(对齐方式的图标)

在LVGL中,样式全部作为对象存在,对象可以描述样式。每个控件可以独立添加样式,并且创建的样式之间不会相互影响。

可以使用类型创建和初始化样式。

样式会延迟渲染,因此必须使用存储类别的描述符或声明为全局变量。

样式是多面的,不仅包括颜色和形状,还包括边距、边框,甚至动画转换效果等细节。

LVGL的样式从CSS获得了很多灵感,所以样式的操作与CSS相似

然后,可以为获得的样式对象设置样式规则。

所有设置样式函数都是形式,完整的样式规则将在后面介绍。未指定的样式规则保持控件的默认样式。

然后,可以为控件指定样式。例如,您可以创建一个按钮,然后使用函数设置您创建的样式:。

这将更改按钮的外观。效果包括:。

以上更改了按钮的颜色,但是不太理解颜色的制作过程也没关系。稍后介绍颜色代码的说明。您可以通过将GREEN更改为其他颜色名称来更改不同的颜色。设置样式的函数的末尾有一个参数。表示样式选择器。下面介绍。

可以在一个文件中创建多个不同的样式对象,以便同一界面中的按钮可以表达多个不同的样式。

控件可以被认为是在创建时同时添加了默认样式,因此代码中指定的所有样式都将覆盖默认样式。

有些特殊的本地样式具有最高优先级,但只对一个控件有效。创建本地样式:。

这些都是形式的函数。

设置了本地样式后,可以再次更改和返回本地样式。因此,必须谨慎使用本地样式。

要理解控件的部分,必须分析控件的配置。例如,可以使用以下代码创建滑块控件:。

滑块是一种调整类型控件,可以通过拖动控制柄来调整滑块的当前数值。滑块的默认表示形式为:。

此外,必须先对齐圆弧,然后设置标签对齐(图标对齐设置)(对齐方式的图标) 热门话题

使用全局和本地样式更改控件的各部分。修正后,方向盘部分变为方形,主体和进行状况的颜色发生了变化。

选择器的更好用途是通过控件状态和逐位或运算来更改某些状态下的样式。例如,选择器

仅在按下时才将此样式用于滑块的主体。

LVGL的选择器以与CSS的伪元素和伪类选择器非常相似的表现形式发挥效果。

拖动滑块时,将使用函数持续触发事件

获取当前获取的滑块值。有关详细的滑块API,请参见官方文档中的说明。

下面将详细介绍可以在样式中设置的属性。

要了解大小和位置如何工作,首先必须了解LVGL的长方体模型。官方文件中有一张可以很好地说明控件框架结构的图。

下表总结了尺寸和位置的可用属性。

缺省值

按控制类别确定

最小宽度

最大宽度

屏幕宽度

按控制类别确定

最小宽度

最大宽度

屏幕高度

对齐方式

左上角

对齐后水平偏移量

对齐后垂直偏移量

注意这里有最小或最大宽度和高度,在上一节中介绍flex和grid布局时,表示控件的宽度会自动调整以适应布局,因此可以提供阈值来防止太大或太小。

控件的水平尺寸可以位于父容器的1/2到3/4之间。

在父容器中,还可以使用特殊单位调整大小,以容纳包括控件在内的所有适当值。例如,按钮是一个容器,该容器将默认样式设置为自动适应包含其宽度和高度的标签大小。

缺省值

只能用边框的宽度、绝对宽度进行说明

绘制哪个部分的边框

设置重绘边框,指示要包括的子控件的绘制已完成

..。

稍后将介绍颜色属性

缺省值

pad_top

上边距

pad_bottom

下边距

pad_left

左边距

pad_right

右边距

pad_row

如果控件具有布局,则各行之间的间距

pad_column

如果控件具有布局,则各列之间的间距

但是,在设置布局时,可以统一设置上下左右的余量。可以使用水平和垂直边距设置,也可以设置行和列之间的间距。

可设定轮廓的属性比外框少得多。下表列出了轮廓的一些属性。

缺省值

轮廓宽度

轮廓到主体的间距

..。

稍后将介绍颜色属性

轮廓和边框最根本的区别是两者不尽相同。因此,你可以在同一元素上同时使用不同风格的轮廓边框来实现一些有趣的效果。例如

表现效果:

阴影可以使控件看起来更立体。下表列出了要设置阴影的一些属性。

缺省值

设置阴影模糊半径

设置阴影的水平偏移

设置阴影的垂直偏移

调整阴影大小

..。

稍后将介绍颜色属性

例如,将模糊半径为50的蓝色阴影设置为:。

效果包括:。

以下设置将放大偏移的红色阴影。

效果包括:。

遗憾的是,LVGL无法为同一控件设置多个阴影覆盖,从而无法获得更复杂的效果。

创建控件时经常使用字符。下表列出了影响文字效果的属性。

缺省值

设置文本字体

默认字体

字符间距

设置多行文本的行间距

设置文本装饰

设置文本对齐方式

..。

稍后将介绍颜色属性

请注意,如果未指定任何子控件,则表示使用父容器中设置的文本样式的文本样式是可继承的。

文本中可能存在许多样式。与此相对,可以使用CSS之类的span来分割文本中样式的作用域。要创建span,必须首先创建span-group。

创建的span-group与一般控件一样,可以添加一些样式。

span-group提供了比标签更适合处理大段文本的函数。

设置文本对齐

控制溢出文本的处理方式

以像素为单位设置文本首行的缩进

设置多行文本的换行。请参见枚举。

有了span-group,您可以使用以下代码创建span并设置文本:。

每个span都有独立的样式界面,可以单独设置范围内文本的样式。

span-group可以创建多个span,并且样式效果不会相互影响。

效果包括:。

您可以注意到默认的span-group没有样式。span-group还有很多API,具体可以参考官方文件的相关介绍。

下表显示了其他样式属性。

缺省值

设置控件的圆角。此属性会统一影响边框和轮廓。

0,即无圆角

设置控件的布局方法

设置影响布局方向的文本书写方向

默认写入方向

..。

稍后将介绍颜色属性

设置半径时,可以使用百分比,例如将控件设置为圆形。

以上列出了大多数样式属性,但除了颜色之外,还有许多其他样式未进行描述,如转换、动画和渐变。这些稍后介绍。LVGL还具有专门为相应控件设计的特殊样式。下面介绍这些控件和样式。

LVGL中的直线实际上是指折线,因为可以一次连续绘制多个连接段。要绘制折线,请首先准备端点坐标。

然后,可以从这些端点创建折线。

效果包括:。

创建的折线作为一个整体,实际上也是一个控件。当然,您可以添加各种属性。

效果包括:。

折线具有其他控件所没有的特殊样式属性。下表列出了折线的特殊特性。

缺省值

设置段宽度

设置虚线实际部分的距离的步骤

设置虚线虚数部分的距离的步骤

设置段端点是否为圆角

设置段颜色

设置颜色透明度

不透明

虚线仅对水平和垂直线段有效,只有当两个属性不为0时,虚线才有效果。

例如,样式:

表现效果:

要添加:

效果如下:。

对于折线,还有一些函数可以控制绘制折线的垂直翻转。除此之外,折线什么都不介绍。后面将介绍图表,您可以画出更美的折线效果。

尽管LVGL圆弧与直线属于相同的基本控件,圆弧的功能远比直线丰富,而且API比滑块复杂的控件更多。

首先创建一个简单的圆弧,然后显示默认效果。

默认效果如下:。

默认情况下,圆弧实际上表示为圆弧滑块。要获取纯圆弧,请删除圆弧的控制柄。

我在这里做了两件事:首先删除把手的样式,这里的第二个参数表示删除所有样式,然后清除圆弧的可点击标志位,无法接收用户的点击事件。这使圆弧看起来纯粹更多。

默认圆弧为开口下方的270°圆弧。可以使用函数设置圆弧的形状

更改前景和背景圆弧的开始范围以角度为单位。请注意圆弧的角度为0°为右方向,90°为下方向。两个函数都有单独设置开始或停止位置的版本。例如,设定

可以按以下方式调整圆弧的角度:。

圆弧也有特殊样式,如直线,下表显示圆弧具有的样式特性。

缺省值

设置弧宽

设置圆弧的端点是否为圆角

设置圆弧颜色

设置圆弧透明度

不透明

设置圆弧填充图像

无填充图像

以上是官方文件的介绍,但这个默认显然与实际不同。这是因为大约514行启用了默认样式。

默认情况下,圆弧、按钮等控件以这种方式表示,因为此样式在初始化时会修改包含圆弧的某些样式。

圆弧可以将控件排列为基准。例如

旋转标签以对齐圆弧的手柄。第三个参数是半径偏移,效果如下:。

与其说对齐控制柄,不如说对齐圆弧的当前值是正确的。例如,可以使用以下函数更改圆弧值:。

这样效果就明显啦。

圆弧的默认值范围为0到100,但也可以使用函数更改值范围。另外,还有一个函数,它只对齐控件而不旋转。此外,必须先对齐圆弧,然后设置标签对齐。否则,标签不会更新位置,因为它不是包含关系。

总体而言,圆弧不是纯圆弧,因此具有滑块的各种特征。例如,可以响应事件,也可以使用捕获值。

公式文档-样式概述

官方文档-所有样式特性概述


1a 设置重绘边框,指示要包括的子控件的绘制已完成

[今日要闻]

发表评论

Copyright 2002-2022 by 正益农产品网(琼ICP备2022001899号-3).All Rights Reserved.