LVGL组件
LVGL组件的使用
1 . 父和子对象
2. 部件的基本属性及设置
/******** 设置打小 ********/
/******** 注意:设置部件位置时,坐标原点在父对象的左上角 ********/
lv_obj_set_size(); //设置打小
lv_obj_set_width(); //宽度
lv_obj_set_height(); //高度
/******** 设置位置 ********/
lv_obj_set_pos(obj, new_x, new_y); //同时设置X、Y轴坐标
lv_obj_set_x(obj, new_x); //设置X轴坐标:
lv_obj_set_y(obj, new_y); //设置Y轴坐标:
/******** 设置对齐 ********/
//设置对齐(需要设置的对齐对象、对齐方式、偏移X、偏移Y)
lv_obj_set_align(obj, LV_ALIGN_...,x,y);
//设置对齐(需要设置的对齐对象、对起的目标、对齐方式、偏移X、偏移Y)
lv_obj_set_align_to();
/******** 设置样式 ********/
//设置样式(需要设置的对象、样式属性、样式值)
lv_obj_set_styles();
//根据样式属性设置样式值(需要设置的对象、样式属性、样式值)
{
static lv_style_t style; /* 定义样式变量 */
lv_style_init(&style); /* 初始化样式 */
lv_style_set_bg_color(&style, lv_color_hex(0xf4b183)); /* 设置背景颜色 */
lv_obj_t * obj = lv_obj_create(lv_scr_act()); /* 创建一个部件 */
lv_obj_add_style(obj, & style, LV_STATE_DEFAULT); /* 设置部件的样式 */
}
//直接对对象设置样式
{
lv_obj_t * obj = lv_obj_create(lv_scr_act()); /* 创建一个部件 */
/* 设置部件的颜色样式 */
lv_obj_set_style_bg_color(obj, lv_color_hex(0xf4b183),LV_STATE_DEFAULT);
}
//样式的宏定义
enum {
LV_STATE_DEFAULT = 0x0000, /* 默认状态 */
LV_STATE_CHECKED = 0x0001, /* 切换或选中状态 */
LV_STATE_FOCUSED = 0x0002, /* 通过键盘、编码器聚焦或通过触摸板、鼠标单击 */
LV_STATE_FOCUS_KEY = 0x0004, /* 通过键盘、编码器聚焦 */
LV_STATE_EDITED = 0x0008, /* 由编码器编辑 */
LV_STATE_HOVERED = 0x0010, /* 鼠标悬停(现在不支持)*/
LV_STATE_PRESSED = 0x0020, /* 已按下 */
LV_STATE_SCROLLED = 0x0040, /* 滚动状态 */
LV_STATE_DISABLED = 0x0080, /* 禁用状态 */
…
};
//单独设置部件中某个部分的样式
enum {
LV_PART_MAIN = 0x000000, /* 主体,像矩形一样的背景 */
LV_PART_SCROLLBAR = 0x010000, /* 滚动条 */
LV_PART_INDICATOR = 0x020000, /* 指示器,指示当前值 */
LV_PART_KNOB = 0x030000, /* 手柄或旋钮,用于调整参数值 */
LV_PART_SELECTED = 0x040000, /* 选项框,指示当前选择的选项 */
LV_PART_ITEMS = 0x050000, /* 相似的元素,例如单元格 */
LV_PART_TICKS = 0x060000, /* 刻度 */
LV_PART_CURSOR = 0x070000, /* 光标 */
};
/******** 设置事件 ********/
//设置事件回调函数(需要设置的对象、事件回调函数、事件代码、传递数据)
lv_obj_add_event_cb(obj, event_cb, event_code, user_data);
//移除事件回调函数
lv_obj_remove_event_cb(obj, event_cb);
//事件代码(在回调函数中判断事件类型、常用于两个两个事件调用同一个回调函数)
static void event_cb( lv_event_t *e )
{
lv_event_code_t code = lv_event_get_code(e); /* 第一步:获取事件类型 */
if ( code == LV_EVENT_CLICKED ) /* 第二步:判断事件类型 */
{
printf(“事件类型: 按下后释放\r\n”); /* 第三步:执行相应操作 */
}
else if ( code == LV_EVENT_LONG_PRESSED)
{
printf(“事件类型:按下(长按)\r\n”);
}
}
3. 图解:
还有其他样式可以设置
2. 组件分类
-
基础组件:
- 标签(Label):用于显示文本信息。可以设置文本内容、字体、颜色等属性。
lv_obj_t *label = lv_label_create(parent);//创建标签 lv_label_set_text(label, "Hello World");//设置文本内容 lv_label_set_style(label, &style);//设置样式 // 设置标签字体库 lv_obj_set_style_text_font(lab1, &my_fony_28, LV_STATE_DEFAULT); { //文本不存储在动态内存,而是在指定的缓冲区中(慎用) lv_label_set_text_static( label,"hallo" ); } //设置格式化文本 lv_label_set_text_fmt( label, “Value: %d”, 50 );
- 按钮(Button):用户可与之交互的基本元素,例如点击按钮触发某个事件。
- 开关(Switch):类似于按钮,但通常用于表示两种状态之间的切换(如开/关)。
- 复选框(Checkbox):用户可以通过选中或取消选中来表示某个选项的状态。
-
输入组件:
- 文本框(Textbox):允许用户输入和编辑文本。
- 键盘(Keyboard):通常与文本框配合使用,提供虚拟键盘以输入文本。
- 下拉列表(Dropdown):显示一个下拉列表供用户选择。
- 列表(List):显示多个项目供用户选择或查看。
-
指示组件:
- 进度条(Progressbar):用于显示某个任务或操作的进度。
- 滑块(Slider):允许用户通过滑动来调整某个值或设置。
- 滚轮(Scrollbar):通常与列表或文本框配合使用,用于滚动查看内容。
-
容器组件:
- 窗口(Window):可以包含其他组件并作为一个整体进行移动、缩放等操作。
- 容器(Container):用于组织和管理其他组件的布局。
-
交互组件:
- 消息框(Messagebox):用于显示消息或提示用户进行操作。
- 选项卡(Tab):允许用户在不同页面或选项之间进行切换。
- 图片按钮(Image Button):使用图片作为按钮的显示内容。
-
特殊组件:
- 帧动画播放器(Frame Animation Player):用于播放由一系列图片组成的帧动画。