一、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:轨道上圆形拖动按钮
使用规则
  1. 不写 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禁用。
特点:
  1. 可叠加:LV_STATE_PRESSED | LV_STATE_CHECKED;
  2. 只作用样式渲染,不能控制隐藏 / 滚动这类全局行为;
  3. 配合 Part:限定「哪种状态下,哪个区块变样式」。

3. Style 样式(外观参数集合)

含义
存放一套视觉属性:字体、背景色、文字颜色、圆角、边框、内边距等。两种存在形式:
  1. 公共样式:独立lv_style_t,可多控件复用;
  2. 内联样式: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
  1. LV_OBJ_FLAG_DISABLED:标志,全局锁死控件,完全无法交互,所有样式失效;
  2. LV_STATE_DISABLED:仅样式标记,只是渲染灰色禁用外观,控件仍可响应触摸。

三、四者组合完整示例(开关 switch)

需求:
  1. 页面默认隐藏(Flag);
  2. 开关底板常态灰色、按下浅蓝色(State+Part=MAIN,Style = 颜色);
  3. 滑块勾选时绿色(State+Part=INDICATOR,Style = 绿色);
  4. 拖动圆钮按下变红(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);

四、核心对比总结(易混点)

  1. Flag 和 State 区别
  • Flag:控件全局功能开关(隐藏、滚动、能否点击),永久生效,不影响外观渲染逻辑;
  • State:仅用于样式渲染,临时交互标记,不改变控件行为。
  1. Part 和 State 区别
  • Part:空间,分区块;
  • State:交互,分操作; 二者通过|拼接,作为样式生效的筛选条件。
  1. 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

关键举例区分

  1. LV_OBJ_FLAG_DISABLED(标志) 调用lv_obj_add_flag(btn, LV_OBJ_FLAG_DISABLED):控件彻底无法点击,是永久功能关闭。
  2. LV_STATE_DISABLED(状态) 仅在样式中使用:给禁用状态单独设置灰色文字,只有 FLAG_DISABLED 开启时,控件才会进入这个状态渲染灰色样式。
简单总结:FLAG 管控件能不能做什么;STATE 管控件长什么样子
Logo

智能硬件社区聚焦AI智能硬件技术生态,汇聚嵌入式AI、物联网硬件开发者,打造交流分享平台,同步全国赛事资讯、开展 OPC 核心人才招募,助力技术落地与开发者成长。

更多推荐