没志青年
发布于 2025-09-10 / 19 阅读
0

05 LVGL 组件和布局

基础控件

标签(文本显示)lv_label

Label (lv_label) - LVGL 9.4 documentation

可调亮度圆点 lv_led

图片

图片格式:

格式

说明

分布(高位->低位)

一个点占用字节数

支持透明度

RGB565

常用于 MCU

R(5 bit)+G(6 bit)+B(5 bit)

2

RGB565A8

LVGL自定义的一种结构,透明度单独存。

3

RGB888

常用于 SOC

R+G+B 各8位

3

XRGB8888

内存对齐,性能好。

X(仅占位作用)+R+G+B 各8位

4

ARGB8888

颜色最全。

A(透明度)+R+G+B 各8位

4

用哪个取决于LCD屏幕支持哪种,和硬件的性能,最常见的是 RGB565

静态图片

图片转 C 代码:Image Converter — LVGL

静态图片

视频

开关 lv_switch

按钮 lv_button

按钮矩阵

复选框 lv_checkbox

键盘 lv_keyboard

线条 lv_line

列表

菜单

消息

旋转滚动条 lv_spinner

日历 lv_calendar

表盘

v8 lv_meter

v9 lv_scale

复杂控件

Canvas

Lottie

按键矩阵

Button Matrix (lv_buttonmatrix) - LVGL 9.4 documentation

组成

事件

界面绘制事件

calendar 日历

Calendar (lv_calendar) - LVGL 9.4 documentation

组成:

  • LV_PART_MAIN:主要背景

  • LV_PART_ITEMS:剩下的所有。

设置星期的文本:

  static const char *day_names[7] = {"日", "一", "二", "三", "四", "五", "六"};
  lv_calendar_set_day_names(ui_calendar, day_names);

没办法只“星期”设置为中文,一旦设置,整个都是中文,因此还得数字、字母,占用空间。

事件

LV_EVENT_VALUE_CHANGED

scale 刻度线

../../_images/scale.png

组成:

  • LV_PART_MAIN:横着的那条蓝线

  • LV_PART_ITEMS:红色的小刻度

  • LV_PART_INDICATOR:绿色的大刻度 + 紫色的文本

模式:

注意数组最后一个元素必须为 NULL

图片类型指针:

消息弹框

Message Box (lv_msgbox) - LVGL 9.4 documentation