LVGL库入门教程04-样式

🚀 优质资源分享 🚀

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

LVGL样式

LVGL样式概述

创建样式

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

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

static lv\_style\_t style;
lv\_style\_init(&style);

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

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

LVGL 中的样式从 CSS 中吸取了很多灵感，因此对样式的操作都类似 CSS

接下来，可以对得到的样式对象设置一些样式规则：

/* ... create and init style ... */
lv\_style\_set\_radius(&style_btn_safe, 15);
lv\_style\_set\_bg\_opa(&style_btn_safe, LV_OPA_COVER);
lv\_style\_set\_bg\_color(&style_btn_safe, lv\_palette\_main(LV_PALETTE_GREEN));
lv\_style\_set\_border\_width(&style_btn_safe, 5);

所有的设置样式函数都是 lv_style_set_...() 形式，完整的样式规则将在之后介绍。未指定的样式规则将保持控件的默认样式。

然后就可以将样式分配给控件，例如，以下创建了一个按钮并利用 lv_obj_add_style() 函数设置其样式为刚才创建的样式了：

lv\_obj\_t* btn = lv\_btn\_create(lv\_scr\_act());
lv\_obj\_set\_size(btn, 120, 50);
lv\_obj\_t* label = lv\_label\_create(btn);
lv\_label\_set\_text(label, "Button");
lv\_obj\_add\_style(btn, &style_btn_safe, 0);

这样按钮的外观就会被改变了，效果为：

以上修改了按钮的颜色，如果对颜色的创建过程不太理解也不要紧，以后会介绍颜色的代码描述。可以简单地将 GREEN 改成其它颜色名来改变不同的颜色。设置样式的函数最后有一个参数 0 ，它代表的是样式的选择器，将会在接下来介绍。

一个文件内可以创建多种不同的样式对象，这样同一个界面中按钮可以表现出多种不同的样式。

样式的级联

所谓“级联”(cascading)，指的是将多个样式分配给一个对象。此时如果多个样式间设置的样式属性有重复，那么将使用最后设置的样式值。也就是说，后设置的样式具有更高的优先级。

控件在创建时可以视为同时添加了一个默认的样式，因此在代码中指定的任意样式都会覆盖默认的样式。

还有一种特殊的局部样式(local styles)，局部样式具有最高的优先级，但只对单个控件有效。局部样式的创建类似如下：

lv\_obj\_set\_style\_bg\_color(btn, lv\_palette\_main(LV_PALETTE_RED), 0);

它们都是 lv_obj_set_style_...() 形式的函数。

局部样式一旦被设置，只能再次通过局部样式修改回来。因此，局部样式需要谨慎使用。

选择器

LVGL 的选择器(selector)与 CSS 不同。在 CSS 中，样式通过选择器选择需要作用的元素；而 LVGL 中，样式通过选择器作用于控件的部分。

要明白什么是控件的部分，需要分析控件的组成。例如，以下代码可以创建一个滑块(slider)控件：

lv\_obj\_t* slider01 = lv\_slider\_create(lv\_scr\_act());

滑块是一种调整类型的控件，用户可以通过拖动它的把手(knob)来调节滑块当前的数值。滑块默认的表现形式为：

仔细观察滑块的组成，滑块可以由主体外形、把手(knob)和进度指示条(indicator)组成。可以通过选择器单独设置这三个构成部分的样式。例如，假设需要更改这三个部分的样式，就可以通过选择器分别指定修改的结构：

static lv\_style\_t style_slider_main;
lv\_style\_init(&style_slider_main);
lv\_style\_set\_bg\_opa(&style_slider_main, LV_OPA_COVER);
lv\_style\_set\_bg\_color(&style_slider_main, lv\_palette\_main(LV_PALETTE_YELLOW));
/* using selectors */
lv\_obj\_add\_style(slider01, &style_slider_main, LV_PART_MAIN);
lv\_obj\_set\_style\_radius(slider01, 0, LV_PART_KNOB);
lv\_obj\_set\_style\_bg\_color(slider01, lv\_palette\_main(LV_PALETTE_RED), LV_PART_INDICATOR);

这里分别使用全局样式和局部样式修改控件的各个部分。修改之后，把手部分变成了方形，主体和进度进度的颜色都发生了变化：