LVGL组件

LVGL组件的使用

目录

• LVGL组件的使用
  • 1 . 父和子对象
  • 2. 部件的基本属性及设置
    • 3. 图解：
      • 还有其他样式可以设置
  • 2. 组件分类

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. 组件分类

1. 基础组件：

   • 标签（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）：用户可以通过选中或取消选中来表示某个选项的状态。

2. 输入组件：

   • 文本框（Textbox）：允许用户输入和编辑文本。
   • 键盘（Keyboard）：通常与文本框配合使用，提供虚拟键盘以输入文本。
   • 下拉列表（Dropdown）：显示一个下拉列表供用户选择。
   • 列表（List）：显示多个项目供用户选择或查看。

3. 指示组件：

   • 进度条（Progressbar）：用于显示某个任务或操作的进度。
   • 滑块（Slider）：允许用户通过滑动来调整某个值或设置。
   • 滚轮（Scrollbar）：通常与列表或文本框配合使用，用于滚动查看内容。

4. 容器组件：

   • 窗口（Window）：可以包含其他组件并作为一个整体进行移动、缩放等操作。
   • 容器（Container）：用于组织和管理其他组件的布局。

5. 交互组件：

   • 消息框（Messagebox）：用于显示消息或提示用户进行操作。
   • 选项卡（Tab）：允许用户在不同页面或选项之间进行切换。
   • 图片按钮（Image Button）：使用图片作为按钮的显示内容。

6. 特殊组件：

   • 帧动画播放器（Frame Animation Player）：用于播放由一系列图片组成的帧动画。