LVGL库入门 01 - 样式

一、LVGL样式概述

Styles 用于设置对象的外观。 lvgl 中的样式很大程度上受到 CSS 的启发。

简而言之，其概念如下：

• 样式是一个 lv_style_t 变量，它可以保存边框宽度、文本颜色等属性。它类似于 CSS 中的“类”。

• 可以将样式分配给对象以更改其外观。在赋值过程中，可以指定目标部分（CSS 中的pseudo element）和目标状态（pseudo class）。例如，当滑块处于按下状态时，可以将“style_blue”添加到滑块的旋钮。

• 任何数量的对象都可以使用相同的样式。

• 样式可以级联，这意味着可以将多个样式分配给一个对象，并且每个样式可以具有不同的属性。因此，并非所有属性都必须在样式中指定。 LVLG 将寻找一个属性，直到一个样式定义它，或者如果它没有被任何样式指定，则使用默认值。例如，style_btn 可以导致默认的灰色按钮，而style_btn_red 只能添加一个background-color=red 来覆盖背景颜色。

• 后来添加的样式具有更高的优先级。这意味着如果在两种样式中指定了一个属性，则将使用稍后添加的样式。

• 如果对象中未指定某些属性（例如文本颜色），则可以从父级继承。

• 对象可以具有比“正常”样式具有更高优先级的本地样式。

• 与 CSS（伪类描述不同的状态，例如:focus）不同，在 LVGL 中，属性被分配给给定的状态。

• 当对象改变状态时可以应用转换。

1、创建样式

在 LVGL 中，样式都是以对象的方式存在，一个对象可以描述一种样式。每个控件都可以独立添加样式，创建的样式之间互不影响。

可以使用 lv_style_t 类型创建一个样式并初始化：

static lv_style_t style;
lv_style_init(&style);

样式是延迟渲染的，因此需要使用 static 存储类别说明符或将其声明为全局变量。

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

二、样式属性

1、尺寸和位置

要理解尺寸和位置是如何起作用的，首先要理解 LVGL 的盒子模型。官方文档给出了一张图，可以很好地描述一个控件的框架结构：

在设置尺寸的时候，长和宽指的是包括边框(border)厚度的长宽&