LVGL组件

LVGL组件的使用

1 . 父和子对象

1719852439753

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. 图解:

1719853395199
1719853423336
1719853435305
1719853371055

还有其他样式可以设置

1719853854078

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):用于播放由一系列图片组成的帧动画。
posted @ 2024-07-02 01:36  谁TM买小米啊  阅读(15)  评论(0编辑  收藏  举报