基于GUI-Guider的LVGL组件使用教程：【按键与文本，进度条的配合/滑动条与进度条，百分数的配合/开关与灯的配合】

 

   1.前置准备

   在NXP官网搜索GUI-Guider下载GUI-Guider(Windows)版本

    安装后选择LVGL版本：选择空白页和空白模版：

这样就会获得一个空白界面：

点击背景：如图所示，调整背景色：

当上述条件全部具备时，即可进入控件的配置：

2.按键控制加减并与进度条联动

点击【button】生成按键：

在属性设置中修改名字和文本

同理生成另一个按键，名称设置为TempDown，文本设置为down

点击文本;放置一个文本，并且设置为0：

最后放置一个进度条，初值设置为0：

这样所有的控件就设置完毕：

接下来是代码部分：

点击“UP”按键，并点击左上角的事件设置

选择第一个事件“clicked”，选择custom code 选择自定义：选择C语言：

在第一层里放置变量，变量名称要和刚刚放置的文本名称一致。

第二行放置关联函数，将按键变化和文本，进度条联系起来。

第一行代码：

static unsigned int counter=0;
static char buf[4];

第二行代码（加函数）

if(counter<100)counter++;
else counter=0;
sprintf(buf,"%d",counter);
lv_label_set_text(guider_ui.screen_counter,buf);
lv_bar_set_value(guider_ui.screen_progress_bar,counter,LV_ANIM_ON);

第二行代码（减函数）注意在放置减函数时，第一行不需要重新设置变量：

if(counter)counter--;
else counter=counter;
sprintf(buf,"%d",counter);
lv_label_set_text(guider_ui.screen_counter,buf);
lv_bar_set_value(guider_ui.screen_progress_bar,counter,LV_ANIM_ON);

至此，按键控制加减就完成了。

3.滑动页设置：

在组件中找到滑动页：

将其放置在主界面的旁边，大小设置成一样：我的是480x280

这样就设置好滑动页了，将其背景色进行更改，进行下一步：

4.滑动条联动设置：

将容器，进度条，滑动条，进度文本放置在一起，将滑动条，进度条，进度文本初始值设置为0；

点击滑动条文本，选择value change，：

选对要改变的控件，选择自定义代码，选择C语言：

将运行代码放置进去：

第一行，放置变量

int slider_value;

第二行：放置变量相关的联动量：注意变量名称和页码要一一对应

slider_value=lv_slider_get_value(guider_ui.screen_slider_2);
lv_bar_set_value(guider_ui.screen_bar_1,slider_value,LV_ANIM_OFF);
lv_textprogress_set_value(guider_ui.screen_textprogress_1,slider_value);

最后对其进行稍加美化（主要是背景颜色，大小的变化），一个进度条就搞定了。

5.按键设置与LED灯的联动：

在组件中选择开关和LED灯：

选择开关，点击事件设置选择short clicked，选择自定义代码：

 关灯代码：

lv_led_set_brightness(guider_ui.screen_led_1,0);

开灯代码：

lv_led_set_brightness(guider_ui.screen_led_1,255);

最后对按键进行美化：

 点击右上角代码运行，本章就此结束：