当前位置：首页 > article >正文

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

article 2024/11/20 14:25:53

添加普通样式

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,		 /* 禁用状态 */
    …
};

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

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, /* 手柄或旋钮，用于调整参数值 */，一次只能或同中类型一个，多的话会被覆盖

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 的部分组件可能预设了特定的 border 或 outline，导致你的设置不起作用。

解决方案：

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

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

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

事件

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

code：

#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，按键按下就触发，传入数据空

    
}

查看全文

http://www.kler.cn/a/401617.html