📚 课程目录第3章使用颜色与样式基础

3. 使用颜色与样式基础

任务说明

本案例目标是为LVGL控件设置背景色、边框、圆角等基本样式。我们将创建一个带按钮和标签的简单界面，通过LVGL样式API为控件配置背景颜色、边框宽度与颜色、圆角半径，并观察样式生效后的视觉效果。

实现方案

使用LVGL v8版本API。创建一个屏幕（screen），在屏幕上放置一个按钮（btn）和一个标签（label）。为按钮创建独立样式（style），设置背景色为蓝色、边框宽度2像素、边框颜色为深蓝色、圆角半径为10像素。标签使用默认样式，仅设置文字颜色和背景色以展示对比。代码在LVGL模拟器或真实硬件上均可运行，核心逻辑不依赖特定平台。

完整代码

#include "lvgl.h"

/* 按钮样式 */
static lv_style_t style_btn;

void style_demo_create(void)
{
    /* 初始化按钮样式 */
    lv_style_init(&style_btn);
    lv_style_set_bg_color(&style_btn, lv_color_hex(0x2196F3));   /* 背景色：蓝色 */
    lv_style_set_bg_opa(&style_btn, LV_OPA_COVER);              /* 背景不透明 */
    lv_style_set_border_width(&style_btn, 2);                   /* 边框宽度 */
    lv_style_set_border_color(&style_btn, lv_color_hex(0x0D47A1)); /* 边框颜色：深蓝 */
    lv_style_set_border_opa(&style_btn, LV_OPA_COVER);          /* 边框不透明 */
    lv_style_set_radius(&style_btn, 10);                        /* 圆角半径 */

    /* 获取当前屏幕 */
    lv_obj_t *scr = lv_scr_act();

    /* 创建按钮并应用样式 */
    lv_obj_t *btn = lv_btn_create(scr);
    lv_obj_add_style(btn, &style_btn, 0);   /* 将样式添加到按钮 */
    lv_obj_set_size(btn, 120, 50);
    lv_obj_align(btn, LV_ALIGN_CENTER, 0, -30);

    /* 按钮上的文字 */
    lv_obj_t *btn_label = lv_label_create(btn);
    lv_label_set_text(btn_label, "Button");
    lv_obj_center(btn_label);

    /* 创建标签，展示默认样式与按钮样式的对比 */
    lv_obj_t *label = lv_label_create(scr);
    lv_label_set_text(label, "Style Demo");
    lv_obj_align(label, LV_ALIGN_CENTER, 0, 40);

    /* 为标签单独设置文字颜色和背景色（不使用独立样式，直接修改对象属性） */
    lv_obj_set_style_text_color(label, lv_color_hex(0xFF5722), 0);  /* 文字橙色 */
    lv_obj_set_style_bg_color(label, lv_color_hex(0xE0E0E0), 0);    /* 背景浅灰 */
    lv_obj_set_style_bg_opa(label, LV_OPA_COVER, 0);
    lv_obj_set_style_radius(label, 5, 0);                           /* 标签圆角 */
    lv_obj_set_style_pad_all(label, 10, 0);                         /* 内边距，让背景可见 */
}

/* 主函数（模拟器或嵌入式平台入口） */
void app_main(void)
{
    /* LVGL初始化由平台层完成，此处仅创建设计 */
    style_demo_create();
}

关键实现说明

样式创建与添加：使用lv_style_init初始化样式，通过lv_style_set_*系列函数设置背景、边框、圆角属性，最后用lv_obj_add_style将样式绑定到按钮。
直接属性设置：标签部分演示了不创建独立样式、直接通过lv_obj_set_style_*修改对象属性的方式，两种方法在LVGL中均受支持。
可见性保证：为标签设置了背景色和内边距，确保背景色实际可见；按钮样式设置了不透明背景和边框，保证视觉效果明确。

运行与验证

运行方式：

在LVGL模拟器（如PC模拟器）或嵌入式开发板中编译运行上述代码。
调用app_main后，屏幕中央上方显示一个蓝色圆角按钮，按钮文字为“Button”；中央下方显示一个浅灰色圆角标签，文字为“Style Demo”，文字颜色为橙色。

验证方法：

观察按钮背景是否为蓝色（#2196F3），边框是否为深蓝色（#0D47A1）且宽度约2像素，四角是否为圆角（半径10像素）。
观察标签背景是否为浅灰色（#E0E0E0），文字是否为橙色（#FF5722），标签四角有轻微圆角（半径5像素）。
若显示效果与上述描述一致，则说明样式设置成功。

判定标准

代码编译无错误，运行后屏幕显示与上述描述一致的按钮和标签样式，即判定案例通过。若按钮无边框或圆角、标签背景不可见，请检查lv_style_set_border_opa和lv_obj_set_style_bg_opa是否设置为LV_OPA_COVER，以及标签是否正确设置了内边距。