当前位置：首页 > news >正文

《lvgl基础学习 —— lv_style》

news 2026/3/26 22:15:05

1.lv_style

　　lv_style用来控制对象的外观：颜色、字体、圆角、边框、间距等。

没有样式时：

按钮像“灰盒子”
UI 看起来很“Demo”

有样式后：

有品牌色
有层次
有一致风格

　　样式 = UI 的“皮肤系统”

LVGL样式的核心认知：

　　1.样式不等于对象

　　2.一个样式可以给多个对象用

　　3.一个对象可以叠加多个样式

样式的基本使用流程：

static lv_style_t style;lv_style_init(&style);
lv_style_set_bg_color(&style, lv_color_hex(0x007AFF));
lv_style_set_radius(&style, 10);lv_obj_add_style(obj, &style, 0);

demo：蓝色圆角按钮

static lv_style_t style_btn;void ui_style_demo(void)
{lv_style_init(&style_btn);lv_style_set_bg_color(&style_btn, lv_color_hex(0x007AFF));lv_style_set_bg_opa(&style_btn, LV_OPA_COVER);lv_style_set_radius(&style_btn, 12);lv_style_set_text_color(&style_btn, lv_color_white());lv_obj_t *btn = lv_btn_create(lv_scr_act());lv_obj_set_size(btn, 160, 60);lv_obj_center(btn);lv_obj_add_style(btn, &style_btn, 0);lv_obj_t *label = lv_label_create(btn);lv_label_set_text(label, "Styled Button");lv_obj_center(label);
}

常用的样式属性

背景相关：

lv_style_set_bg_color(&style, lv_color_hex(0x333333));
lv_style_set_bg_opa(&style, LV_OPA_COVER);

圆角：

lv_style_set_radius(&style, 10);

边框：

lv_style_set_border_width(&style, 2);
lv_style_set_border_color(&style, lv_color_hex(0xAAAAAA));

文字：

lv_style_set_text_color(&style, lv_color_white());
lv_style_set_text_font(&style, &lv_font_montserrat_18);

内边距：

lv_style_set_pad_all(&style, 10);

样式和“状态”的关系：

LVGL 的对象有状态：
LV_STATE_DEFAULT
LV_STATE_PRESSED
LV_STATE_CHECKED
LV_STATE_DISABLED

　　同一个对象，不同状态，可以用不同样式。

demo：按钮按下变深色

static lv_style_t style_btn;
static lv_style_t style_btn_pressed;void ui_style_state_demo(void)
{lv_style_init(&style_btn);lv_style_set_bg_color(&style_btn, lv_color_hex(0x007AFF));lv_style_set_radius(&style_btn, 12);lv_style_init(&style_btn_pressed);lv_style_set_bg_color(&style_btn_pressed, lv_color_hex(0x005BBB));lv_obj_t *btn = lv_btn_create(lv_scr_act());lv_obj_set_size(btn, 160, 60);lv_obj_center(btn);lv_obj_add_style(btn, &style_btn, LV_STATE_DEFAULT);lv_obj_add_style(btn, &style_btn_pressed, LV_STATE_PRESSED);lv_obj_t *label = lv_label_create(btn);lv_label_set_text(label, "Press me");lv_obj_center(label);
}

样式复用

错误做法：

lv_style_t s;
lv_style_init(&s);
/* 用一次就丢 */

正确做法：

static lv_style_t style_btn_primary;
static lv_style_t style_label_title;void ui_style_init(void)
{lv_style_init(&style_btn_primary);lv_style_set_bg_color(&style_btn_primary, lv_color_hex(0x007AFF));
}

demo：设置项（label + switch）

static lv_style_t style_row;void ui_style_layout_demo(void)
{lv_style_init(&style_row);lv_style_set_pad_all(&style_row, 10);lv_style_set_border_width(&style_row, 1);lv_style_set_border_color(&style_row, lv_color_hex(0xDDDDDD));lv_style_set_radius(&style_row, 8);lv_obj_t *cont = lv_obj_create(lv_scr_act());lv_obj_set_size(cont, 300, 200);lv_obj_center(cont);lv_obj_set_layout(cont, LV_LAYOUT_FLEX);lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN);for(int i = 0; i < 3; i++) {lv_obj_t *row = lv_obj_create(cont);lv_obj_set_size(row, LV_PCT(100), 50);lv_obj_add_style(row, &style_row, 0);lv_obj_set_layout(row, LV_LAYOUT_FLEX);lv_obj_set_flex_flow(row, LV_FLEX_FLOW_ROW);lv_obj_set_flex_align(row,LV_FLEX_ALIGN_SPACE_BETWEEN,LV_FLEX_ALIGN_CENTER,LV_FLEX_ALIGN_CENTER);lv_obj_t *label = lv_label_create(row);lv_label_set_text_fmt(label, "Option %d", i + 1);lv_switch_create(row);}
}