【嵌入式LVGL】05.LVGL中的样式、状态、部分、标志
·
一、LVGL 四概念完整区分:样式 style / 状态 state / 部件 part / 标志 flag
一、总览四者定位
|
名词
|
核心作用维度
|
存储位置
|
作用对象
|
关键字前缀 / 宏
|
|
Style 样式
|
外观视觉:颜色、字体、圆角、间距
|
单独lv_style_t结构体 / 控件内置内联样式
|
控件某区域、某交互状态
|
lv_style_set_*
|
|
State 状态
|
交互动态:用户操作带来的临时状态(按下 / 勾选 / 禁用)
|
控件内部位标记,运行时动态变化
|
整个控件,搭配 Part 限定区域
|
LV_STATE_*
|
|
Part 部件
|
空间分区:一个控件内部多块独立图形区域
|
写在选择器selector 里,静态分区
|
控件内部局部区块
|
LV_PART_*
|
|
Flag 标志
|
控件全局固定开关:隐藏、可滚动、点击锁定等永久属性
|
控件头部位标记,长期生效
|
整个控件,不分区域、不分状态
|
LV_OBJ_FLAG_*
|
二、逐个详解
1. Part 部件(空间分区,静态不变)
含义
一个控件拆分出多个独立绘图区块,用来分别给不同区块设置外观(同一控件不同 PART 可以单独设置颜色、字体、圆角,互不干扰)
- 静态:控件创建后分区固定,不会随触摸变化;
- 仅用于样式匹配规则,不控制控件行为。
常用宏:LV_PART_MAIN(默认主体)、LV_PART_INDICATOR滑块填充、LV_PART_KNOB拖动圆钮、LV_PART_SCROLLBAR滚动条、LV_PART_SELECTED选中条目。
使用位置:和 State 做位或,拼成第三个 selector 参数
LV_STATE_PRESSED | LV_PART_KNOB
PART(部件 / 区域):空间维度 —— 控件长什么样、分几块
每个复杂控件内部由多个独立可视区块组成,LV_PART_* 用来指定「当前样式作用在控件的哪一块图形区域」。部件是静态固定的,控件创建后分区就不会改变,和用户触摸操作无关。
全部通用部件宏
|
部件宏
|
含义
|
适用控件
|
|
LV_PART_MAIN
|
主体底板(默认值,省略 PART 自动用这个)
|
所有控件
|
|
LV_PART_INDICATOR
|
进度 / 开关高亮滑块、填充条
|
switch、slider、bar
|
|
LV_PART_KNOB
|
可拖动的圆形旋钮 / 滑块按钮
|
slider、switch
|
|
LV_PART_SCROLLBAR
|
垂直 / 水平滚动条
|
list、textarea、table
|
|
LV_PART_SELECTED
|
列表被选中的条目
|
list、table、roller
|
|
LV_PART_CURSOR
|
文本输入闪烁光标
|
textarea
|
|
LV_PART_HEADER
|
顶部标题栏
|
tabview、table
|
实例拆解:开关 lv_switch
- LV_PART_MAIN:开关灰色底板长条
- LV_PART_INDICATOR:滑块滑动后填充的彩色进度
- LV_PART_KNOB:白色可拖动小圆钮
实例拆解:滑动条 lv_slider
- LV_PART_MAIN:整条灰色轨道
- LV_PART_INDICATOR:滑过的蓝色进度条
- LV_PART_KNOB:轨道上圆形拖动按钮
使用规则
- 不写 PART 时,selector 默认等价 LV_PART_MAIN;
// 简写 lv_obj_set_style_bg_color(btn, lv_color_white(), LV_STATE_DEFAULT); // 完整等价 lv_obj_set_style_bg_color(btn, lv_color_white(), LV_STATE_DEFAULT | LV_PART_MAIN);
2. State 交互状态(动态临时,用户操作触发)
含义
描述控件当前的交互临时状态,由触摸、点击、勾选切换,只影响样式渲染,不改变控件全局行为。常用宏:LV_STATE_DEFAULT默认、LV_STATE_PRESSED按下、LV_STATE_CHECKED勾选、LV_STATE_FOCUSED焦点、LV_STATE_DISABLED禁用。
特点:
- 可叠加:LV_STATE_PRESSED | LV_STATE_CHECKED;
- 只作用样式渲染,不能控制隐藏 / 滚动这类全局行为;
- 配合 Part:限定「哪种状态下,哪个区块变样式」。
3. Style 样式(外观参数集合)
含义
存放一套视觉属性:字体、背景色、文字颜色、圆角、边框、内边距等。两种存在形式:
- 公共样式:独立lv_style_t,可多控件复用;
- 内联样式:lv_obj_set_style_xxx()直接写在控件内部,仅当前控件生效。
绑定规则:样式不会自动生效,必须挂载时指定 State | Part 匹配条件:
// 公共样式挂载 lv_obj_add_style(obj, &my_style, LV_STATE_DEFAULT | LV_PART_MAIN); // 内联样式直接绑定规则 lv_obj_set_style_bg_color(obj, lv_color_red(), LV_STATE_PRESSED | LV_PART_MAIN);
一句话:Style 是 “长啥样”,State+Part 是 “什么时候、哪块区域长这样”。
4. Flag 对象标志(控件全局行为开关,独立于样式)
含义
控制控件整体功能行为,作用于整个控件全部区域,不区分 Part、不区分 State,优先级高于样式。常用宏:
- LV_OBJ_FLAG_HIDDEN 隐藏控件(你切换页面核心用法)
- LV_OBJ_FLAG_SCROLLABLE 允许滚动
- LV_OBJ_FLAG_CLICKABLE 允许点击
- LV_OBJ_FLAG_DISABLED 全局禁用(和 STATE_DISABLED 区分)
API:
lv_obj_add_flag(obj, LV_OBJ_FLAG_HIDDEN); // 开启标志 lv_obj_clear_flag(obj, LV_OBJ_FLAG_HIDDEN); // 关闭标志 lv_obj_has_flag(obj, LV_OBJ_FLAG_HIDDEN); // 判断标志
关键区分:Flag_DISABLED vs STATE_DISABLED
- LV_OBJ_FLAG_DISABLED:标志,全局锁死控件,完全无法交互,所有样式失效;
- LV_STATE_DISABLED:仅样式标记,只是渲染灰色禁用外观,控件仍可响应触摸。
三、四者组合完整示例(开关 switch)
需求:
- 页面默认隐藏(Flag);
- 开关底板常态灰色、按下浅蓝色(State+Part=MAIN,Style = 颜色);
- 滑块勾选时绿色(State+Part=INDICATOR,Style = 绿色);
- 拖动圆钮按下变红(State+Part=KNOB,Style = 红色)。
// 1. Flag:整个控件隐藏(全局行为,不分区域/状态) lv_obj_add_flag(sw, LV_OBJ_FLAG_HIDDEN); // 2. 主体底板:默认灰色 lv_obj_set_style_bg_color(sw, lv_grey(), LV_STATE_DEFAULT | LV_PART_MAIN); // 3. 主体底板:按下浅蓝色 lv_obj_set_style_bg_color(sw, lv_light_blue(), LV_STATE_PRESSED | LV_PART_MAIN); // 4. 填充滑块:勾选绿色 lv_obj_set_style_bg_color(sw, lv_green(), LV_STATE_CHECKED | LV_PART_INDICATOR); // 5. 拖动圆钮:按下红色 lv_obj_set_style_bg_color(sw, lv_red(), LV_STATE_PRESSED | LV_PART_KNOB);
四、核心对比总结(易混点)
- Flag 和 State 区别
- Flag:控件全局功能开关(隐藏、滚动、能否点击),永久生效,不影响外观渲染逻辑;
- State:仅用于样式渲染,临时交互标记,不改变控件行为。
- Part 和 State 区别
- Part:空间,分区块;
- State:交互,分操作; 二者通过|拼接,作为样式生效的筛选条件。
- Style 和 另外三者 Style 是外观数据,State+Part 是这套外观的生效条件;Flag 是完全独立的控件行为开关,和样式渲染体系无关。
五、极简记忆口诀
- Flag:管控件能不能看见、能不能点(全局行为)
- Part:管控件哪一块绘图(空间分区)
- State:管用户对控件做了什么操作(交互状态)
- Style:管这块区域在这个状态下长什么样子(视觉外观)
二、区分LVGL 标志 (FLAG)、状态 (STATE)
一、控件标志 FLAG(lv_obj_set_flag /lv_obj_clear_flag)
1. 标志是什么
FLAG 是控件永久固定属性开关,属于控件自身的静态配置,不受鼠标 / 触摸交互影响,一旦设置,除非手动清除,永久生效。作用:控制控件的基础行为、渲染规则、交互权限、布局规则。
2. 标志操作 API
// 设置标志(开启功能) void lv_obj_add_flag(lv_obj_t * obj, lv_obj_flag_t f); // 清除标志(关闭功能) void lv_obj_clear_flag(lv_obj_t * obj, lv_obj_flag_t f); // 判断是否存在该标志 bool lv_obj_has_flag(lv_obj_t * obj, lv_obj_flag_t f);
3. 最常用 FLAG 清单(高频)
|
标志宏
|
作用
|
典型场景
|
|
LV_OBJ_FLAG_HIDDEN
|
隐藏控件,不再渲染、不参与布局
|
切换 Tab 页面隐藏非激活页、弹窗隐藏
|
|
LV_OBJ_FLAG_CLICKABLE
|
允许接收点击触摸事件
|
按钮、可点击标签默认开启
|
|
LV_OBJ_FLAG_CLICK_FOCUSABLE
|
点击时自动获取焦点
|
输入框、可选中控件
|
|
LV_OBJ_FLAG_SCROLLABLE
|
开启滚动,内容超出尺寸可拖动
|
页面容器、长文本区域
|
|
LV_OBJ_FLAG_SCROLL_ELASTIC
|
滚动到边界有弹性回弹效果
|
滚动列表、Tab 内容区
|
|
LV_OBJ_FLAG_FLOATING
|
脱离父布局,不参与流式排布
|
弹窗、悬浮提示框
|
|
LV_OBJ_FLAG_OVERFLOW_VISIBLE
|
超出控件大小的内容正常显示
|
浮动气泡、超出边界文字
|
|
LV_OBJ_FLAG_NO_GESTURE
|
屏蔽滑动手势
|
禁止左右滑动切换 Tab
|
使用示例
// 隐藏页面(FLAG_HIDDEN) lv_obj_add_flag(page1, LV_OBJ_FLAG_HIDDEN); // 取消隐藏 lv_obj_clear_flag(page1, LV_OBJ_FLAG_HIDDEN); // 让标签可以被点击 lv_obj_add_flag(lb1, LV_OBJ_FLAG_CLICKABLE);
二、状态 STATE(LV_STATE_XXX,样式选择器)
1. 状态是什么
STATE 是临时交互瞬时状态,由用户触摸、焦点、勾选等操作动态切换,自动变化,不需要手动设置 / 清除。作用:配合样式,实现点击变色、选中变色、置灰禁用等交互视觉效果。
2. 核心常用 STATE
|
状态宏
|
触发时机
|
|
LV_STATE_DEFAULT
|
默认常态,无任何交互(初始状态)
|
|
LV_STATE_PRESSED
|
手指 / 鼠标按下控件时
|
|
LV_STATE_FOCUSED
|
控件获得输入焦点(光标、Tab 选中)
|
|
LV_STATE_CHECKED
|
开关、复选框、Tab 按钮被选中
|
|
LV_STATE_DISABLED
|
控件禁用,无法点击交互
|
使用示例(搭配样式)
// 默认状态文字红色 lv_obj_set_style_text_color(btn, lv_color_hex(0xff0000), LV_STATE_DEFAULT); // 按下状态文字白色 lv_obj_set_style_text_color(btn, lv_color_hex(0xffffff), LV_STATE_PRESSED); // 选中状态背景蓝色 lv_obj_set_style_bg_color(btn, lv_color_hex(0x0066ff), LV_STATE_CHECKED);
三、FLAG(标志) 和 STATE(状态)核心区别
1. 本质属性不同
- FLAG 标志:静态配置开关 控件固有属性,写死控件行为,手动代码增删,不会随触摸自动切换。 例:LV_OBJ_FLAG_HIDDEN 隐藏,不点击也永久隐藏,必须手动clear_flag才显示。
- STATE 状态:动态交互瞬时标记 由系统根据用户操作自动切换,不需要代码手动修改;只用于区分样式渲染。 例:手指按下自动进入LV_STATE_PRESSED,松开自动切回DEFAULT。
2. 作用对象不同
- FLAG:控制行为逻辑(显示 / 隐藏、能否点击、能否滚动、布局规则);
- STATE:仅控制样式外观(颜色、圆角、边框,只能在样式 API 第三个参数使用)。
3. 生命周期对比
- FLAG:一旦add_flag永久生效,直到clear_flag清除;
- STATE:瞬时切换,交互动作结束立刻变回默认状态。
4. 操作方式对比
- FLAG:API lv_obj_add_flag / lv_obj_clear_flag 手动修改;
- STATE:无修改 API,系统自动管理,代码只能读取、不能手动设置。
5. 能否位或组合
- FLAG:单个控件可同时存在多个 FLAG(可叠加);
- STATE:样式选择器可多状态位或,例如 LV_STATE_PRESSED | LV_STATE_CHECKED(同时按下 + 选中)。
6. 直观对比表格
|
对比项
|
FLAG 标志
|
STATE 状态
|
|
控制权
|
开发者手动开关
|
LVGL 内核自动切换
|
|
核心用途
|
控制控件功能 / 行为
|
区分不同交互下的显示样式
|
|
生命周期
|
持久生效,手动清除
|
临时瞬时,交互结束自动重置
|
|
典型代表
|
HIDDEN、SCROLLABLE、CLICKABLE
|
PRESSED、CHECKED、DISABLED
|
|
使用位置
|
lv_obj_add_flag(obj, FLAG)
|
样式函数第三个参数
lv_obj_set_style_xxx(..., STATE)
|
|
互相影响
|
FLAG 改变交互能力,间接影响 STATE 触发(如 NO_CLICK 则不会进入PRESSED)
|
STATE 完全不影响 FLAG
|
关键举例区分
- LV_OBJ_FLAG_DISABLED(标志) 调用lv_obj_add_flag(btn, LV_OBJ_FLAG_DISABLED):控件彻底无法点击,是永久功能关闭。
- LV_STATE_DISABLED(状态) 仅在样式中使用:给禁用状态单独设置灰色文字,只有 FLAG_DISABLED 开启时,控件才会进入这个状态渲染灰色样式。
简单总结:FLAG 管控件能不能做什么;STATE 管控件长什么样子。
更多推荐

所有评论(0)