使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第十四讲)

         上一期讲解了滑动条的模式以及模块划分，这一期我们将在GUI_guider中讲解具体的使用以及信号。

         首先打开GUI_guider软件打开工具栏将滑动条拖拽到界面中，这里设置滑动条范围在[0,100]，初始值设置为20，使用普通模式。

在模块与状态栏中我们可以在这里切换三种模块，分别是背景、指示器、滑块具体如下图所示：

如上图所用红框圈起来的部分是插入图片，意思可以将背景、指示器以及滑块部分的颜色使用图片代替，下面是滑块的图片事例：

滑动条的普通信号在这里不多加赘述，滑动条有俩个特殊的信号具体如下：

[1]LV_EVENT_VALUE_CHANGED 在拖动滑块或用键更改。当滑块处于被拖拽。

[2]LV_EVENT_RELEASED 在刚刚释放滑块时发送。

以下是具体事例代码：

    //Write codes screen_1_slider_1

    //在该屏幕界面下创建滑动条

ui->screen_1_slider_1 = lv_slider_create(ui->screen_1);

//设置滑动条的范围

lv_slider_set_range(ui->screen_1_slider_1, 0, 100);

//设置滑动条的模式

lv_slider_set_mode(ui->screen_1_slider_1, LV_SLIDER_MODE_NORMAL);

//设置滑动条的初始值

lv_slider_set_value(ui->screen_1_slider_1, 20, LV_ANIM_OFF);

//设置滑动条的位置与大小

    lv_obj_set_pos(ui->screen_1_slider_1, 94, 214);

    lv_obj_set_size(ui->screen_1_slider_1, 292, 33);

//Write style for screen_1_slider_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.

//设置滑动条的透明度

lv_obj_set_style_bg_opa(ui->screen_1_slider_1, 121, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置滑动条的背景颜色

lv_obj_set_style_bg_color(ui->screen_1_slider_1, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);

//设置滑动条的渐变方向

lv_obj_set_style_bg_grad_dir(ui->screen_1_slider_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置滑动条的圆角半径

lv_obj_set_style_radius(ui->screen_1_slider_1, 50, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置滑动条边框宽度

lv_obj_set_style_outline_width(ui->screen_1_slider_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置滑动条阴影宽度

    lv_obj_set_style_shadow_width(ui->screen_1_slider_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write style for screen_1_slider_1, Part: LV_PART_INDICATOR, State: LV_STATE_DEFAULT.

//设置指示器背景透明度

lv_obj_set_style_bg_opa(ui->screen_1_slider_1, 255, LV_PART_INDICATOR|LV_STATE_DEFAULT);

//设置指示器背景颜色

    lv_obj_set_style_bg_color(ui->screen_1_slider_1, lv_color_hex(0x2195f6), LV_PART_INDICATOR|LV_STATE_DEFAULT);

//设置指示器渐变方向

lv_obj_set_style_bg_grad_dir(ui->screen_1_slider_1, LV_GRAD_DIR_NONE, LV_PART_INDICATOR|LV_STATE_DEFAULT);

//设置指示器圆角半径

    lv_obj_set_style_radius(ui->screen_1_slider_1, 50, LV_PART_INDICATOR|LV_STATE_DEFAULT);

//Write style for screen_1_slider_1, Part: LV_PART_KNOB, State: LV_STATE_DEFAULT.

//设置背景透明度

lv_obj_set_style_bg_opa(ui->screen_1_slider_1, 255, LV_PART_KNOB|LV_STATE_DEFAULT);

//设置背景颜色

lv_obj_set_style_bg_color(ui->screen_1_slider_1, lv_color_hex(0x2195f6), LV_PART_KNOB|LV_STATE_DEFAULT);

//设置背景渐变方向

lv_obj_set_style_bg_grad_dir(ui->screen_1_slider_1, LV_GRAD_DIR_NONE, LV_PART_KNOB|LV_STATE_DEFAULT);

//设置背景图像

lv_obj_set_style_bg_img_src(ui->screen_1_slider_1, &_1_43x43, LV_PART_KNOB|LV_STATE_DEFAULT);

//设置图像透明度

    lv_obj_set_style_bg_img_opa(ui->screen_1_slider_1, 255, LV_PART_KNOB|LV_STATE_DEFAULT);

lv_obj_set_style_bg_img_recolor_opa(ui->screen_1_slider_1, 0, LV_PART_KNOB|LV_STATE_DEFAULT);

//设置背景圆角半径

    lv_obj_set_style_radius(ui->screen_1_slider_1, 33, LV_PART_KNOB|LV_STATE_DEFAULT);

//Write style for screen_1_slider_1, Part: LV_PART_KNOB, State: LV_STATE_FOCUSED.

//聚焦模式下背景透明度

lv_obj_set_style_bg_opa(ui->screen_1_slider_1, 255, LV_PART_KNOB|LV_STATE_FOCUSED);

//聚焦模式下背景颜色

lv_obj_set_style_bg_color(ui->screen_1_slider_1, lv_color_hex(0x2195f6), LV_PART_KNOB|LV_STATE_FOCUSED);

//聚焦模式下背景渐变方向

lv_obj_set_style_bg_grad_dir(ui->screen_1_slider_1, LV_GRAD_DIR_NONE, LV_PART_KNOB|LV_STATE_FOCUSED);

//聚焦模式下背景圆角半径

    lv_obj_set_style_radius(ui->screen_1_slider_1, 50, LV_PART_KNOB|LV_STATE_FOCUSED);

//Write style for screen_1_slider_1, Part: LV_PART_KNOB, State: LV_STATE_DISABLED.

//禁用模式下背景透明度

lv_obj_set_style_bg_opa(ui->screen_1_slider_1, 255, LV_PART_KNOB|LV_STATE_DISABLED);

//禁用模式下背景颜色

lv_obj_set_style_bg_color(ui->screen_1_slider_1, lv_color_hex(0x2195f6), LV_PART_KNOB|LV_STATE_DISABLED);

//禁用模式下背景渐变方向

lv_obj_set_style_bg_grad_dir(ui->screen_1_slider_1, LV_GRAD_DIR_NONE, LV_PART_KNOB|LV_STATE_DISABLED);

//禁用模式下圆角半径

    lv_obj_set_style_radius(ui->screen_1_slider_1, 50, LV_PART_KNOB|LV_STATE_DISABLED);

下一期讲解其他控件的基础使用。

本文章由威三学院出品

对课程感兴趣可以私信联系