LVGL学习之样式和时间,基于正点原子

添加普通样式

cpp 复制代码
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); 					/* 设置部件的样式 */

添加本地样式

cpp 复制代码
lv_obj_t * obj = lv_obj_create(lv_scr_act()); 						/* 创建一个部件 */
lv_obj_set_style_bg_color(obj, lv_color_hex(0xf4b183),LV_STATE_DEFAULT);	/* 设置部件的样式 */

普通样式定义静态全局,或者是动态分配可用,本地样式只能在定义的局部使用

cpp 复制代码
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,		 /* 禁用状态 */
    ...
};

这个用于设置样式是最后一项的选择。

LVGL的样式设置

样式 设置在lvgl官网,选择v8.2的版本,overview,选择Style properties,我们可以看到有这样一些特性,点border进去(边界)

设置的格式是 lv_obj_set_style_(前缀)+后缀,下图加粗字体

示例:lv_obj_set_style_border_color(obj1, lv_color_hex(0x56c94c), LV_STATE_DEFAULT); //设置主体边界颜色

另外,每个widgets有不同的组成部分,比如滑块就有指示器,手柄和主体三部分组成,设置的话可以通过

lv_obj_set_style_bg_color(slider1, lv_color_hex(0x56c94c), LV_STATE_DEFAULT| LV_PART_KNOB);

其中 LV_PART_KNOB = 0x030000, /* 手柄或旋钮,用于调整参数值 */,一次 只能或同中类型一个,多的话会被覆盖

cpp 复制代码
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, 	 	/* 光标 */
};

tips:

某些默认样式可能会覆盖你的设置。例如,slider 的部分组件可能预设了特定的 borderoutline,导致你的设置不起作用。

解决方案:

确保在设置样式时清除或覆盖默认样式:

lv_obj_remove_style_all(slider); // 移除所有默认样式

lv_obj_add_style(slider, &style, LV_PART_MAIN); // 添加新样式

事件

LVGL中,当发生用户感兴趣的事情时,可以触发回调事件,以执行相关的操作。

code:

cpp 复制代码
#include "my_gui.h"
#include <stdio.h>

lv_obj_t* obj1;
lv_obj_t* switch1;
static void my_event_cb(lv_event_t* e)
{
     lv_event_code_t code=lv_event_get_code(e);   //获取不同事件类型
     if (code == LV_EVENT_CLICKED)  //同一部件不同事件类型
     {
         printf("Event Type: Pree and release\r\n");
     }else if(code == LV_EVENT_LONG_PRESSED)
     {
         printf("Event Type:Long Press\r\n");
     }
}

static void event_cb(lv_event_t* e)
{
    lv_obj_t* target = lv_event_get_target(e); 		 /* 第一步:获取触发事件的部件 */
    if (target == obj1)				 /* 第二步:判断触发事件的部件 */
    {
        printf("parent triggle \r\n");	 		 /* 第三步:执行相应操作 */
    }
    else if (target == switch1)
    {
        printf("child triggle \r\n");
    }
}


void my_gui_demo(void)
{

    obj1 = lv_obj_create(lv_scr_act());
    lv_obj_set_size(obj1, 480, 320);

    switch1 = lv_switch_create(obj1);
    lv_obj_set_size(switch1, 50, 20);
    lv_obj_set_align(switch1, LV_ALIGN_CENTER);
    //事件
    lv_obj_add_event_cb(obj1,my_event_cb, LV_EVENT_CLICKED, NULL);   //obj1控件,回调函数cb,按键按下就触发,传入数据空
    lv_obj_add_event_cb(obj1, my_event_cb, LV_EVENT_LONG_PRESSED, NULL);   //obj1控件,回调函数cb,按键按下就触发,传入数据空

    lv_obj_add_event_cb(obj1, event_cb, LV_EVENT_CLICKED, NULL);   //obj1控件,回调函数cb,按键按下就触发,传入数据空
    lv_obj_add_event_cb(switch1, event_cb, LV_EVENT_CLICKED, NULL);   //obj1控件,回调函数cb,按键按下就触发,传入数据空

    
}
相关推荐
前端百草阁几秒前
从npm库 Vue 组件到独立SDK:打包与 CDN 引入的最佳实践
前端·vue.js·npm
夏日米米茶1 分钟前
Windows系统下npm报错node-gyp configure got “gyp ERR“解决方法
前端·windows·npm
且白32 分钟前
vsCode使用本地低版本node启动配置文件
前端·vue.js·vscode·编辑器
程序研32 分钟前
一、ES6-let声明变量【解刨分析最详细】
前端·javascript·es6
待什么青丝1 小时前
【TMS570LC4357】之相关驱动开发学习记录2
c语言·arm开发·驱动开发·单片机·学习
疯狂的沙粒1 小时前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
行云流水剑1 小时前
【学习记录】如何使用 Python 提取 PDF 文件中的内容
python·学习·pdf
siwangqishiq21 小时前
Vulkan Tutorial 教程翻译(四) 绘制三角形 2.2 呈现
前端
李三岁_foucsli1 小时前
js中消息队列和事件循环到底是怎么个事,宏任务和微任务还存在吗?
前端·chrome
尽欢i1 小时前
HTML5 拖放 API
前端·html