立即注册 找回密码

微雪课堂

搜索
微雪课堂 图形用户界面(GUI) 查看内容

STM32之littlevGL系列教程:基本对象(lv_obj)的使用

2020-3-28 21:06| 发布者: imliubo| 查看: 7289| 评论: 0|原作者: IAMLIUBO

摘要: Hi,大家好,欢迎来到STM32之littleVGL课堂,我们在上节课中学习一些对象的基本属性,本节课带大家来看一下如何使用基本对象,废话不多说!一 有图有真相本节课我们将创建三个下面的对象,这里大家不要以为是三个按 ...
Hi,大家好,欢迎来到STM32之littleVGL课堂,我们在上节课中学习一些对象的基本属性,本节课带大家来看一下如何使用基本对象,废话不多说!
一 有图有真相
本节课我们将创建三个下面的对象,这里大家不要以为是三个按钮(虽然长得确实很像按钮...),通过下面的实例去学习一下对象的基本操作。

二 代码分析
在开始之前,我们这里先约定一下以后的测试代码怎么加到工程中去,这样以后就不用每节课都需要跟大家讲了,既方便了大家的时间,也能形成一定小小的规范。
首先我们先新建两个文件,分别取名为test.ctest.h,保存到下面路径中,当然这不是唯一选项,你也保存到工程其它目录中:

然后分别将下面内容复制到文件中,首先是test.h文件的:

#ifndef _TEST_H
#define _TEST_H

void demo_test(void);

#endif

然后是test.c文件的:

#include "test.h"
#include "stdio.h"
#include "main.h"
#include "../lvgl/lvgl.h"


static void obj_test(void)
{
	  lv_obj_t * obj1;
    obj1 = lv_obj_create(lv_scr_act(), NULL);
    lv_obj_set_size(obj1, 200, 100);
    lv_obj_set_style(obj1, &lv_style_plain_color);
    lv_obj_align(obj1, NULL, LV_ALIGN_IN_LEFT_MID, 0, 0);

    lv_obj_t * obj2;
    obj2 = lv_obj_create(lv_scr_act(), obj1);
    lv_obj_set_style(obj2, &lv_style_pretty_color);
    lv_obj_align(obj2, NULL, LV_ALIGN_CENTER, 0, -100);

    static lv_style_t style_shadow;
    lv_style_copy(&style_shadow, &lv_style_pretty);
    style_shadow.body.shadow.width = 6;
    style_shadow.body.radius = LV_RADIUS_CIRCLE;
    
    lv_obj_t * obj3;
    obj3 = lv_obj_create(lv_scr_act(), obj2);
    lv_obj_set_style(obj3, &style_shadow);
    lv_obj_set_pos(obj3,400,300);
}
void demo_test(void)
{
    obj_test();
}

然后将两个文件加到工程树中,如下图:

然后我们在main.c文件中将头文件包含进去:

#include "../lv_examples/lv_apps/demo/test.h"

最后在main函数中调用一下demo_test函数,如下图:

这样就可以编译代码测试了。

我们以后都会将测试代码保存到test.c文件中,然后在demo_test函数中调用,就可以看到效果了,后面不会再做说明,请大家要牢记!

编译完成后,相信大家就能够看到上面图片中的效果了,这里给大家简单分析一下代码,请大家一定记得以后将每篇文章中的代码放到哪一个文件中!

相信大家看代码就可以很直观的看出来,这里我们创建了三个对象,分别取名为obj1、obj2、obj3,然后对三个对象做了不同的操作。
对象1(obj1):
    lv_obj_t * obj1;
    obj1 = lv_obj_create(lv_scr_act(), NULL);
    lv_obj_set_size(obj1, 100, 50);
    lv_obj_set_style(obj1, &lv_style_plain_color);
    lv_obj_align(obj1, NULL, LV_ALIGN_IN_LEFT_MID, 0, 0);
我们来一行一行的分析一下,后面的教程可能就不会想这样详细的去分析代码了,刚开始是为了方便大家理解:
前两行我们声明了对象1的一个结构体,然后我们通过lv_obj_create()创建了这个对象实例,其中指定其父对象为lv_scr_act(),这个代码什么意思呢?其实就是获取默认显示的被激活的窗口作为父对象,lv_scr_act()可以理解为是lv_screen_active()的缩写,相信这样写很多人就明白了,有时候我们需要理解是什么单词的缩写,可以帮助我们更好的理解代码,当然这也是很多人的不足之处,毕竟掌握好英语要比写好代码还要难~哈哈,相信大家应该都有这种感觉吧!
然后lv_obj_set_size(obj1, 100, 50)是设置对象1的大小,这个函数同时设置了对象的宽和高,你也可以使用lv_obj_set_width()和lv_obj_set_height()去分别设置对象的大小。
然后lv_obj_set_style(obj1, &lv_style_plain_color)是设置的对象1的样式(外观),其中lv_style_plain_color是默认的样式中的一样,还有很多其它的默认样式如下:
lv_style_t lv_style_scr;
lv_style_t lv_style_transp;
lv_style_t lv_style_transp_fit;
lv_style_t lv_style_transp_tight;
lv_style_t lv_style_plain;
lv_style_t lv_style_plain_color;
lv_style_t lv_style_pretty;
lv_style_t lv_style_pretty_color;
lv_style_t lv_style_btn_rel;
lv_style_t lv_style_btn_pr;
lv_style_t lv_style_btn_tgl_rel;
lv_style_t lv_style_btn_tgl_pr;
lv_style_t lv_style_btn_ina;
每种样式之间都会有不一样的地方,大家可以自己去体验一下,这里就不一一给大家去展示了。
然后lv_obj_align(obj1, NULL, LV_ALIGN_IN_LEFT_MID, 0, 0)是设置当前对象与父对象的对齐样式,为什么是父对象呢?因为我们把第二个参数给的是NULL,此时会默认将父对象作为对齐的对象,然后LV_ALIGN_IN_LEFT_MID是对齐样式,也就是我们在上节课中给出的图中的那几种样式,大家也可以参考下面的样式代码:
/** Object alignment. */
enum {
    LV_ALIGN_CENTER = 0,
    LV_ALIGN_IN_TOP_LEFT,
    LV_ALIGN_IN_TOP_MID,
    LV_ALIGN_IN_TOP_RIGHT,
    LV_ALIGN_IN_BOTTOM_LEFT,
    LV_ALIGN_IN_BOTTOM_MID,
    LV_ALIGN_IN_BOTTOM_RIGHT,
    LV_ALIGN_IN_LEFT_MID,
    LV_ALIGN_IN_RIGHT_MID,
    
    LV_ALIGN_OUT_TOP_LEFT,
    LV_ALIGN_OUT_TOP_MID,
    LV_ALIGN_OUT_TOP_RIGHT,
    LV_ALIGN_OUT_BOTTOM_LEFT,
    LV_ALIGN_OUT_BOTTOM_MID,
    LV_ALIGN_OUT_BOTTOM_RIGHT,
    LV_ALIGN_OUT_LEFT_TOP,
    LV_ALIGN_OUT_LEFT_MID,
    LV_ALIGN_OUT_LEFT_BOTTOM,
    LV_ALIGN_OUT_RIGHT_TOP,
    LV_ALIGN_OUT_RIGHT_MID,
    LV_ALIGN_OUT_RIGHT_BOTTOM,
};
typedef uint8_t lv_align_t;
可以看到对齐样式是非常多的,这里方便大家理解,再贴一下上一节课中的图片,看起来更加直观:

最后两个参数是x坐标和y坐标,是对齐后的坐标偏移,大家可以自己修改一下试试。
这样我们就创建完了对象1了,是不是很简单?下面我们主要分析一下对象2和对象3与对象1的不同部分,相同的就不分析了。

对象2(obj2):
    lv_obj_t * obj2;
    obj2 = lv_obj_create(lv_scr_act(), obj1);
    lv_obj_set_style(obj2, &lv_style_pretty_color);
    lv_obj_align(obj2, NULL, LV_ALIGN_CENTER, 0, 0);
对象2与对象1的创建方式是复制的对象1的,所以会是lv_obj_create(lv_scr_act(), obj1),第二个参数就是要复制的对象。
这里对象2与对象1的不同之处就只有样式和对齐方式不一样了,比如样式做了圆角处理,然后颜色也有少许不同,然后是居中对齐。
对象3(obj3):
    static lv_style_t style_shadow;
    lv_style_copy(&style_shadow, &lv_style_pretty);
    style_shadow.body.shadow.width = 6;
    style_shadow.body.radius = LV_RADIUS_CIRCLE;
    
    lv_obj_t * obj3;
    obj3 = lv_obj_create(lv_scr_act(), obj2);
    lv_obj_set_style(obj3, &style_shadow);
    lv_obj_set_pos(obj3,350,200);
同样的对象3是通过复制对象2得到的,然后样式做了比较大的改动,比如增加了阴影效果,阴影效果是围绕对象周围的一圈阴影,我们可以通过style_shadow.body.shadow.width设置阴影的宽度,然后圆角处理做的更加明显了。
最后对象3没有通过对齐的方式去设定显示的位置,而是通过设定坐标的方式,这里的坐标是相对于我们创建的窗口来说的,左上角为(0,0)。
这就是我们创建的三个基本对象,当然这里没有设定对象的事件之类的,这些我们将在后面比如学习按钮控件的时候再学习,因为一个按钮事件相对来讲更容易理解。

OK,本节课程就到这里,大家可以将代码复制到自己的工程,然后修改某些参数去多操作几遍,本节就到这里,下一节我们学习如何画一个圆,以及做一个动态的圆弧效果。

最后再次强调,请大家记得后面文章的测试代码放到哪一个文件中!


83

顶一下

刚表态过的朋友 (83 人)

相关阅读

最新评论

微雪官网|产品资料|手机版|小黑屋|微雪课堂. ( 粤ICP备05067009号 )

GMT+8, 2024-3-29 17:30 , Processed in 0.022018 second(s), 17 queries .

返回顶部