使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第三十六讲)
lv_spinner（环形加载器）的样式与lv_arc相同。在LVGL中，lv_spinner通常由以下部分组成，你可以针对这些部分进行样式定制：
• 主体（LV_PART_MAIN）：充当背景弧线。你可以设置它的颜色、宽度等，作为旋转弧段的背景。
• 指示器（LV_PART_INDICATOR）：这是旋转的弧段本身，是动画效果的核心。它的颜色、宽度等可以独立于主体进行设置。
• 手柄（LV_PART_KNOB）：在某些版本的LVGL中，lv_spinner也可能包含手柄部分
1.事件
该控件的事件没有特殊的，全部为基础事件。
以下是对信号的说明：
Clicked: 如果没有被滚动，在释放时被调用（与长按无关）。
Short Clicked: 对象被按下一小段时间，然后释放。如果被滚动，则不会被调用。
Pressed: 对象已被按下。
Pressing: 对象正在被按下（在按下期间持续调用）。
Press Lost: 对象仍在被按下，但滑动光标/手指离开对象。
Released: 在任何对象释放时被调用。
Value Changed: 对象的值已更改（例如，滑块移动）。
Long Pressed: 对象至少被按下long_press_time。如果被滚动，则不会被调用。
Long Pressed Repeat: 在每long_press_repeat_time（长按重复时间）毫秒后，调用一次。如果被滚动，则不会被调用。
Scroll: 滚动中。
Scroll Begin: 滚动开始。事件参数是滚动动画的指针，可以被修改。
Scroll End: 滚动结束。
Focused: 对象获得焦点。
Defocused: 对象失去焦点。
Leave: 输入设备离开对象上方的悬停状态。
Hit Test: 执行高级点击测试。
Key: 将键发送给对象，用lv_indev_get_key(lv_indev_active());获取键值。
2.代码
//Write codes screen_1_spinner_1
//创建控件
ui->screen_1_spinner_1 = lv_spinner_create(ui->screen_1, 1000, 60);
//设置位置以及大小
lv_obj_set_pos(ui->screen_1_spinner_1, 181, 175);
lv_obj_set_size(ui->screen_1_spinner_1, 100, 100);
//Write style for screen_1_spinner_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//内边距设置
lv_obj_set_style_pad_top(ui->screen_1_spinner_1, 5, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_bottom(ui->screen_1_spinner_1, 5, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_left(ui->screen_1_spinner_1, 5, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_right(ui->screen_1_spinner_1, 5, LV_PART_MAIN|LV_STATE_DEFAULT);
//背景设置
lv_obj_set_style_bg_opa(ui->screen_1_spinner_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(ui->screen_1_spinner_1, lv_color_hex(0xeeeef6), LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_grad_dir(ui->screen_1_spinner_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
//弧线设置
lv_obj_set_style_arc_width(ui->screen_1_spinner_1, 12, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_arc_opa(ui->screen_1_spinner_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_arc_color(ui->screen_1_spinner_1, lv_color_hex(0xd5d6de), LV_PART_MAIN|LV_STATE_DEFAULT);
//阴影设置
lv_obj_set_style_shadow_width(ui->screen_1_spinner_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//Write style for screen_1_spinner_1, Part: LV_PART_INDICATOR, State: LV_STATE_DEFAULT.
//设置旋转弧线的宽度
lv_obj_set_style_arc_width(ui->screen_1_spinner_1, 12, LV_PART_INDICATOR|LV_STATE_DEFAULT);
//设置弧线不透明度
lv_obj_set_style_arc_opa(ui->screen_1_spinner_1, 255, LV_PART_INDICATOR|LV_STATE_DEFAULT);
//设置弧线颜色
lv_obj_set_style_arc_color(ui->screen_1_spinner_1, lv_color_hex(0x2195f6), LV_PART_INDICATOR|LV_STATE_DEFAULT);
本文章由威三学社出品
对课程感兴趣可以私信联系