LVGL常见需求实现

本文详细介绍了在使用LVGL设计UI界面时,如何处理点击行为、背景设置、文本对齐、控件图层管理、下拉框选项设置、图标与文字结合、spinbox光标隐藏、聚焦样式、dropdown高度调整、按键交互和双语切换等常见问题和技巧。
摘要由CSDN通过智能技术生成

使用lvgl设计ui界面时,往往遇到无法直接调用API即可实现的需求,这里对常见需求简单记录,适用于8.0以上版本。欢迎评论区补充。

让label 标签可以被选中,被点击
默认不可被点击可选中的控件都可以添加这个标志使其可以被选中可点击。
lv_obj_add_flag(label, LV_OBJ_FLAG_CLICKABLE);
设置标签背景色后实际没有变化,
其实还需要设置透明度。
lv_obj_set_style_bg_opa(label, LV_OPA_70, LV_STATE_FOCUSED);
lv_obj_set_style_bg_color(label, lv_palette_main(LV_PALETTE_GREY),LV_STATE_FOCUSED);
标签内文字只能左右对齐,不能上下对齐。
  • 如果只需要左右对齐文字,不需要对齐控件:
 lv_obj_set_width(label, lv_pct(100));
 lv_obj_set_style_text_align(label, LV_TEXT_ALIGN_CENTER, 0);
  • 如果需要上下左右对齐:
    先创建一个容器,在容器里使用对齐方法实现上下左右的位置设置。
ui.cont_label = lv_obj_create(ui.body);
lv_obj_set_size(ui.cont_label, 300, 80);
lv_obj_align(ui.cont_label, LV_ALIGN_BOTTOM_LEFT, 0, 0);
lv_obj_set_style_bg_color(ui.cont_label, lv_color_make(0xfa, 0xd2, 0x46), 0);
ui.run_label = lv_label_create(ui.cont_label);
lv_label_set_text(ui.run_label, _("Running"));
lv_obj_center(ui.run_label);
图标颜色设置
实现:(这里图标使用的字体库符号)
 lv_label_set_text_fmt(label, "#ff0000 %s", "\ue618");
更新控件图层
有时后创建的对象,绘画时被其他对象覆盖,可以更新图层得以显示。实现:
lv_obj_set_parent(obj, new_parent)
设置dropdown 下拉框选项的字体
直接设置dropdown 对象的字体可能无法正确设置选项内容的字体。可以取其列表设置字体,实现:
lv_obj_set_style_text_font(lv_dropdown_get_list(my_dropdown), &lv_font_chinese_siyuan16_blod, LV_PART_MAIN);
设置带图标的文字,带文字的图标
实现:使用字体库是一直方法,转字体库比较麻烦,使用图片也是一直方法。
 lv_obj_t * img2 = lv_img_create(lv_scr_act());
 lv_img_set_src(img2, LV_SYMBOL_OK "my text");
 lv_obj_align_to(img2, img1, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);
隐藏spinbox 数字微调器的光标
我希望spinbox的光标只在设置值时显示,展示数字时隐藏。
直接实现的方法:通过在回调中修改透明度实现。
 lv_obj_set_style_opa(ui.spinbox, LV_OPA_0, LV_PART_CURSOR);
更简洁的方法是,修改spinbox的源码回调,这样所有的spinbox都会同步设置。将原来的回调改为switch结构 并加入 聚焦 失焦 回调。

在这里插入图片描述

设置聚焦框的风格
被按键或编码器选中的控件,外面有蓝色边框,
lv_obj_set_style_outline_width(my_btn, 5, LV_STATE_FOCUS_KEY);  
lv_obj_set_style_outline_color(my_btn, lv_palette_main(LV_PALETTE_RED), LV_STATE_FOCUS_KEY);
设置dropdown展开后的高度
有时下拉框展开特别长,会超出边界。
 lv_obj_set_style_max_height(lv_dropdown_get_list(dropdown), 150, 0);
 lv_dropdown_set_dir(dropdown, LV_DIR_BOTTOM);
纯按键UI交互,按键交互逻辑的实现
使用gridnav方法,网格导航,[参考官网](http://lvgl.100ask.net/8.2/others/gridnav.html),似乎8.2版本才有。

在这里插入图片描述

  • 使用gridnav按键交互。初试化创建界面时,必须保证组为空。很多控件在创建时默认添加到组里的,要么创建后手动移除,要么修改源码,控件的属性中有一个变量控制着 是否添加组。
  • 需要导航时,一定要确保组内只有需要被聚焦的控件的容器。
  • 因为容器默认可被点击,gridnav按键导航时,有时会出现无聚集对象,多按一下按键的情况,需要手动移除可被聚焦的容器。
  • 使用gridnav导航时,容器加入组的顺序,影响聚焦顺序,先添加就先聚焦。
  • 使用gridnav导航时,聚焦回调不会触发,只有加入组时触发聚焦回调。
双语切换方法

官方提供有多语言切换方法,目前似乎只有汉语英语,网址:gitee
不需要自己编译,找到lv_i18n.c 和lv_i18n.h拷贝自己的工程里使用就行了,(如果不行还是自己编译吧)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值