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

    
}
相关推荐
范文杰1 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪1 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪1 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy2 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom3 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom3 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom3 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom3 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom3 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI4 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端