下表总结了与大小和位置相关的可用属性:

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

可以使用该类型创建样式并初始化:

样式是延迟呈现的,因此需要使用存储类说明符或将其声明为全局变量。

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

lvgl中的样式从CSS中汲取了很多灵感,因此样式的操作与CSS类似

接下来,可以为获得的样式对象设置一些样式规则:

所有样式设置功能都是正式的。完整的样式规则将在后面描述。未指定的样式规则保持控件的默认样式。

然后可以将样式指定给控件。例如,下面创建一个按钮,并使用函数将其样式设置为刚刚创建的样式:

这样,按钮的外观就会改变。其效果是:

按钮颜色已在上面修改。如果您不了解颜色创建过程,这并不重要。颜色代码描述将在后面介绍。您只需将绿色更改为其他颜色名称即可更改不同的颜色。样式设置函数的末尾有一个参数,表示样式选择器,稍后将对其进行描述。

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

创建控件时,可以将其视为同时添加默认样式。因此,代码中指定的任何样式都将覆盖默认样式。

还有一种特殊的局部样式,具有最高优先级,但仅对单个控件有效。本地样式的创建类似于以下内容:

它们都是正式函数。

设置了局部样式后,只能再次通过局部样式对其进行修改。因此,需要谨慎使用本地样式。

要了解控件的组成部分,需要分析控件的组成。例如,以下代码可以创建滑块控件:

滑块是调整型控件。用户可以通过拖动滑块的手柄来调整滑块的当前值。滑块的默认表达式为:

这里,全局样式和局部样式用于修改控件的每个部分。修改后,手柄部分变为正方形,主体颜色和进度发生变化:

更好地使用选择器是对控制状态执行按位或运算,以便可以修改处于特定状态的零件样式。例如选择器

使滑块主体仅在按下时使用此样式:

lvgl的选择器与CSS的伪元素和伪类选择器非常相似。

拖动滑块时,将连续触发事件。您可以使用该函数

获取当前获取的滑块值。有关滑块API的更多信息,请参阅官方文档。

接下来,我们将详细介绍一些可以通过样式设置的属性。

要了解大小和位置如何工作,必须首先了解lvgl的盒子模型。官方文件提供了一个图表,可以很好地描述控件的框架结构:

下表总结了与大小和位置相关的可用属性:

违约:

由控制类别确定

最小宽度

最大宽度

屏幕宽度

由控制类别确定

最小宽度

最大宽度

屏幕高度

对齐:

左上角

对齐后在水平方向上的偏移

对齐后垂直方向上的偏移

请注意,此处有最小或最大宽度和高度。在上一节中介绍flex和grid布局时,显示控件宽度会随布局自动调整。因此,可以提供阈值以防止它们太大或太小。

控件的水平大小可以占据父容器的1/2~3/4:

对于父容器,您还可以使用特殊单位将其大小调整为可以容纳所有包含控件的适当值。例如,按钮就是这样的容器。其默认样式允许其宽度和高度通过此值自动适应包含的标签大小。

违约:

边界宽度只能用绝对宽度来描述

边界的哪些部分被绘制

绘制顺序设置为指示在绘制包含的子控件后绘制边框

..。

与颜色相关的属性将在后面描述

违约:

pad_ top

上缘

pad_ bottom

底边

pad_ left

左边缘

pad_ right

右边距

pad_ row

控件具有布局时的线间距

pad_列

控件具有布局时每列之间的间距

但是,在设置布局时,它还提供了几个缩写属性:您可以同时设置上、下、左和右页边距;或使用并设置水平和垂直边距;还可以使用设置行和列之间的间距。

轮廓的属性远少于边框。下表列出了配置文件的一些属性:

违约:

剖面宽度

纵断面到主体间距

..。

与颜色相关的属性将在后面描述

轮廓和边框之间最根本的区别在于它们不是一回事。因此,您可以在同一元素上使用不同样式的轮廓和边框来实现一些有趣的效果,例如:

性能效果是:

阴影可以使控件看起来是三维的。下表列出了设置阴影的一些属性:

违约:

设置阴影的模糊半径

设置阴影的水平偏移

设置阴影的垂直偏移

设置阴影的放大率

..。

与颜色相关的属性将在后面描述

例如,以下设置了模糊半径为50的蓝色阴影:

其效果是:

以下设置放大偏移红色阴影:

其效果是:

遗憾的是,lvgl无法为同一控件设置多个阴影覆盖以实现更复杂的效果。

创建控件时经常使用文本。下表列出了可能影响文字效果的一些特性:

违约:

设置文本的字体

默认字体

字符间距

设置多行文字的行距

下表总结了与大小和位置相关的可用属性: 热门话题

设置文本装饰

设置文本对齐方式

..。

与颜色相关的属性将在后面描述

应该注意,文本样式是可继承的,这意味着如果未具体指定子控件,它将使用父容器设置的文本样式。

一段文本中可能有许多样式。为此,您可以使用类似于CSS的span来划分文本中样式的范围。要创建跨度,请首先创建跨度组:

创建的跨度组与常规控件没有区别。您可以添加一些样式:

span group提供的以下功能使其比标记更适合处理大型文本段:

设置文本对齐方式

控制如何处理溢出文本

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

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

使用span组,您可以从中创建一个span,并使用以下代码设置文本:

每个跨距提供独立的样式界面,可以分别设置该范围内文本的样式:

跨度组可以创建多个跨度,其样式效果不会相互影响:

其效果是:

您可以注意到,默认跨度组没有样式。Span组也有许多api。详情请参阅官方文件。

下表列出了一些其他样式属性:

违约:

设置控件的圆角。此属性将同时影响边框和轮廓

0,即没有圆角

设置控件的布局

设置文本的书写方向,这也会影响布局的方向

默认写入方向

..。

与颜色相关的属性将在后面描述

例如,在设置半径时,可以使用百分比进行控制圆。

上面列出了大多数样式属性,但除了颜色之外,还有许多样式没有引入,如变换、动画、渐变等,这些将在后面描述。lvgl中还有一些特殊的样式,是为相应的控件设计的。接下来,我们将介绍这些控件和样式。

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

然后,可以通过以下端点创建多段线:

其效果是:

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

其效果是:

多段线具有一些特殊的样式特性,这些特性在其他控件中不可用。下表列出了多段线的特殊特性:

违约:

设置段宽度

设置虚线实部的距离

设置虚线零件的距离

设置线段的端点是否舍入

设置段颜色

设置颜色透明度

不透明的

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

例如,样式:

性能效果是:

如果您添加:

则效果变为:

关于多段线还有另一个函数,可用于控制绘制的多段线的垂直翻转。此外,没有关于虚线的介绍。稍后将介绍图表,以绘制更漂亮的虚线效果。

虽然lvgl中的圆弧和直线属于同一个基本控件,但圆弧的功能比直线丰富得多,甚至API也比滑块复杂得多。

首先,只需创建一个圆弧并检查其默认效果:

默认效果是:

可以看出,默认情况下,圆弧的形式实际上是圆弧滑块。如果要获得纯圆弧,可以删除圆弧的控制柄:

这里做了两件事:第一,删除句柄的样式。这里的第二个参数表示删除所有样式;其次,清除arc的可点击标志,使其不再接收用户的点击事件。因此圆弧看起来更纯净:

默认圆弧是开口向下的270°圆弧。要设置圆弧的形状,可以使用函数

分别修改前景和背景的圆弧起点和终点范围,单位为角度。请注意,弧线的角度在向右正方向为0°,在向下正方向为90°,依此类推。这两种功能都有单独设置启动或停止位置的版本。例如

可以将圆弧的角度调整为:

圆弧也有特殊的样式,如直线。下表列出了圆弧的样式属性:

违约:

设置弧宽

设置圆弧端点是否为圆角

设置弧形颜色

设置弧透明度

不透明的

设置圆弧填充图片

没有填充图片

以上是官方文件的介绍,但此默认值显然与实际情况不符。其原因是在大约514行中启用了默认样式:

初始化此样式时,将修改某些样式,包括圆弧。因此,圆弧、按钮和其他控件将默认为该外观。

圆弧可用作对齐控件的基准。例如,您可以使用

旋转标签以对齐圆弧的控制柄。第三个参数是半径的偏移。其效果是:

对齐圆弧的当前值比对齐控制柄更精确。例如,可以通过以下函数更改圆弧的值:

效果很明显:

圆弧的默认值范围为0~100。您也可以通过函数修改此值范围。此外,还有另一个函数仅对齐控件而不旋转。此外,应注意的是,标签的对齐应在弧对齐后设置。否则,标签将不会更新其位置,因为它未包含在内。

一般来说,圆弧不是纯圆弧,因此它具有滑块的各种特性,例如响应事件和使用滑块获取值。

官方文件-风格介绍

官方文档-所有样式属性介绍


1a 边界的哪些部分被绘制

[新闻动态]

发表评论

Copyright 2002-2022 by 川婉电商网(琼ICP备2022001899号-3).All Rights Reserved.