Hi,大家好,欢迎来到树莓派之littlevGL课堂,我们在上节课中学习了微调框控件(lv_spinbox),本节课带大家学习滑动按钮控件,废话不多说,大家还是看图吧! 一 有图有真相 二 代码分析 用户可下载"圆弧对象(lv_arc)的使用"文章末尾的Demo工程(点击我直接下载),参考圆弧对象(lv_arc)的使用文章,将以下Demo代码复制到Demo工程test.c文件空白处.然后在test.c文件的create_test()函数中增加sw_test()函数测试。 static void sw_event_handler(lv_obj_t * obj, lv_event_t event)
{
if(event == LV_EVENT_VALUE_CHANGED) {
printf("State: %s\n", lv_sw_get_state(obj) ? "On" : "Off");
}
}
void sw_test(void)
{
/*Create styles for the switch*/
static lv_style_t bg_style;
static lv_style_t indic_style;
static lv_style_t knob_on_style;
static lv_style_t knob_off_style;
lv_style_copy(&bg_style, &lv_style_pretty);
bg_style.body.radius = LV_RADIUS_CIRCLE;
bg_style.body.padding.top = 6;
bg_style.body.padding.bottom = 6;
lv_style_copy(&indic_style, &lv_style_pretty_color);
indic_style.body.radius = LV_RADIUS_CIRCLE;
indic_style.body.main_color = lv_color_hex(0x9fc8ef);
indic_style.body.grad_color = lv_color_hex(0x9fc8ef);
indic_style.body.padding.left = 0;
indic_style.body.padding.right = 0;
indic_style.body.padding.top = 0;
indic_style.body.padding.bottom = 0;
lv_style_copy(&knob_off_style, &lv_style_pretty);
knob_off_style.body.radius = LV_RADIUS_CIRCLE;
knob_off_style.body.shadow.width = 4;
knob_off_style.body.shadow.type = LV_SHADOW_BOTTOM;
lv_style_copy(&knob_on_style, &lv_style_pretty_color);
knob_on_style.body.radius = LV_RADIUS_CIRCLE;
knob_on_style.body.shadow.width = 4;
knob_on_style.body.shadow.type = LV_SHADOW_BOTTOM;
/*Create a switch and apply the styles*/
lv_obj_t *sw1 = lv_sw_create(lv_scr_act(), NULL);
lv_sw_set_style(sw1, LV_SW_STYLE_BG, &bg_style);
lv_sw_set_style(sw1, LV_SW_STYLE_INDIC, &indic_style);
lv_sw_set_style(sw1, LV_SW_STYLE_KNOB_ON, &knob_on_style);
lv_sw_set_style(sw1, LV_SW_STYLE_KNOB_OFF, &knob_off_style);
lv_obj_align(sw1, NULL, LV_ALIGN_CENTER, 0, -50);
lv_obj_set_event_cb(sw1, sw_event_handler);
/*Copy the first switch and turn it ON*/
lv_obj_t *sw2 = lv_sw_create(lv_scr_act(), sw1);
lv_sw_on(sw2, LV_ANIM_ON);
lv_obj_align(sw2, NULL, LV_ALIGN_CENTER, 0, 50);
}
/**
* Switch styles.
*/
enum {
LV_SW_STYLE_BG, /**< Switch background. */
LV_SW_STYLE_INDIC, /**< Switch fill area. */
LV_SW_STYLE_KNOB_OFF, /**< Switch knob (when off). */
LV_SW_STYLE_KNOB_ON, /**< Switch knob (when on). */
};
typedef uint8_t lv_sw_style_t;然后第三个跟第四个就是我们那个滑块的样式了,这里我们只设置成了圆形。 这就是四个样式的设置,大家可以对比上面的代码仔细去阅读并理解一下。 lv_sw_set_style(sw1, LV_SW_STYLE_BG, &bg_style);
lv_sw_set_style(sw1, LV_SW_STYLE_INDIC, &indic_style);
lv_sw_set_style(sw1, LV_SW_STYLE_KNOB_ON, &knob_on_style);
lv_sw_set_style(sw1, LV_SW_STYLE_KNOB_OFF, &knob_off_style);lv_obj_set_event_cb(sw1, sw_event_handler); 然后我们又创建了一个滑动按钮对象,这个对象的父对象是第一个滑动按钮,所以第一个所具有的样式和回调函数都继承来了,然后我们设置第二个默认为打开的状态: lv_sw_on(sw2, LV_ANIM_ON); |