【STM32峰会实训经验】lvgl实现滚动显示效果
ST峰会实训中的GUI解决方案演示的咖啡机示例，在加载界面结束后，会跳转到咖啡选择界面。在咖啡选择界面可以看到左右滑动时可以看到不同种类的咖啡视图。!(data/attachment/forum/202505/20/151146s97r22sso4a4la9h.gif "coffe_lvgl3.gif")
这一效果是如何显示的，通过查看示例代码中的lv_selection界面的绘图函数。首先是底层背景的创建代码。
```
/* 咖啡选择界面底层背景 */
obj_bottom_bg = lv_obj_create(lv_scr_act()); /* 创建底层背景 */
lv_obj_set_size(obj_bottom_bg, 800, 480); /* 设置大小 */
lv_obj_align(obj_bottom_bg, LV_ALIGN_TOP_LEFT, 0, 0); /* 设置位置 */
lv_obj_set_style_border_width(obj_bottom_bg, 0, 0); /* 设置边框宽度 */
lv_obj_set_style_shadow_width(obj_bottom_bg, 0, 0); /* 设置阴影宽度 */
lv_obj_set_style_outline_width(obj_bottom_bg, 0, 0); /* 设置轮廓宽度 */
lv_obj_set_style_bg_color(obj_bottom_bg, lv_color_hex(0x000000), 0); /* 设置背景颜色 */
lv_obj_set_style_radius(obj_bottom_bg, 0, 0); /* 设置圆角 */
lv_obj_set_style_pad_all(obj_bottom_bg, 0, 0); /* 设置内部填充 */
lv_obj_set_scrollbar_mode(obj_bottom_bg, LV_SCROLLBAR_MODE_OFF); /* 底层背景不显示滚动条 */
lv_obj_set_scroll_dir(obj_bottom_bg, LV_DIR_HOR);
```
以上代码创建一个符合屏幕分辨率的窗口，同时调用`lv_obj_set_scrollbar_mode(obj_bottom_bg, LV_SCROLLBAR_MODE_OFF);`设置滚动条的样式，调用`lv_obj_set_scroll_dir(obj_bottom_bg, LV_DIR_HOR)`设置滚动条的方向，为当前的显示窗口创建滚动功能。
但是有滚动功能，要实现滚动效果，需要在当前对象显示一个显示范围超出窗口大小的图形对象。代码中以`obj_bottom_bg`为父窗口创建一个宽度超出显示限制，高度与父窗口一致的显示对象，并将其与父窗口左上对齐，从而实现在水平方向上的滚动效果。
```
/* 咖啡选择界面上层背景 */
obj_top_bg = lv_obj_create(obj_bottom_bg); /* 创建上层背景 */
lv_obj_set_size(obj_top_bg, 1680, 480); /* 设置大小 */
lv_obj_align(obj_top_bg, LV_ALIGN_TOP_LEFT, 0, 0); /* 设置位置 */
lv_obj_set_style_border_width(obj_top_bg, 0, 0); /* 设置边框宽度 */
lv_obj_set_style_shadow_width(obj_top_bg, 0, 0); /* 设置阴影宽度 */
lv_obj_set_style_outline_width(obj_top_bg, 0, 0); /* 设置轮廓宽度 */
lv_obj_set_style_bg_color(obj_top_bg, lv_color_hex(0x000000), 0); /* 设置背景颜色 */
lv_obj_set_style_radius(obj_top_bg, 0, 0); /* 设置圆角 */
lv_obj_set_style_pad_all(obj_top_bg, 0, 0); /* 设置内部填充 */
```
到此就可以在创建出来的`obj_top_bg`中添加需要显示的不同咖啡的图片，以美式咖啡为例，首先以`obj_top_bg`为父类创建一个宽度为父类宽度1/8之一，高度相同，左上对齐的显示对象.
```
/* 美式咖啡品种背景 */
lv_obj_t *obj_americano_bg = lv_obj_create(obj_top_bg); /* 创建背景 */
lv_obj_set_size(obj_americano_bg, 210, 480); /* 设置大小 */
lv_obj_set_style_bg_color(obj_americano_bg, lv_color_hex(0x5A4942), 0); /* 设置背景颜色 */
lv_obj_align(obj_americano_bg, LV_ALIGN_TOP_LEFT, 0, 0); /* 设置位置 */
lv_obj_set_style_border_width(obj_americano_bg, 0, 0); /* 设置边框宽度 */
lv_obj_set_style_shadow_width(obj_americano_bg, 0, 0); /* 设置阴影宽度 */
lv_obj_set_style_outline_width(obj_americano_bg, 0, 0); /* 设置轮廓宽度 */
lv_obj_set_style_radius(obj_americano_bg, 0, 0); /* 设置圆角 */
lv_obj_set_style_pad_all(obj_americano_bg, 0, 0);
```
然后以创建出来的`obj_americano_bg`为父窗口,在其中填充显示细节、咖啡图片的等具体的显示要素。
```
/* 美式咖啡品种下方圆弧背景 */
lv_obj_t *obj_americano_arc_bottom = lv_obj_create(obj_americano_bg); /* 创建背景 */
lv_obj_set_size(obj_americano_arc_bottom, 40, 40); /* 设置大小 */
lv_obj_set_style_bg_color(obj_americano_arc_bottom, lv_color_hex(0x5A4942), 0); /* 设置背景颜色 */
lv_obj_align(obj_americano_arc_bottom, LV_ALIGN_BOTTOM_LEFT, 0, 0); /* 设置位置 */
lv_obj_set_style_border_width(obj_americano_arc_bottom, 0, 0); /* 设置边框宽度 */
lv_obj_set_style_shadow_width(obj_americano_arc_bottom, 0, 0); /* 设置阴影宽度 */
lv_obj_set_style_outline_width(obj_americano_arc_bottom, 0, 0); /* 设置轮廓宽度 */
lv_obj_set_style_radius(obj_americano_arc_bottom, 0, 0); /* 设置圆角 */
lv_obj_set_style_pad_all(obj_americano_arc_bottom, 0, 0); /* 设置内部填充 */
/* 美式咖啡品种前景 */
lv_obj_t *obj_americano_top = lv_obj_create(obj_americano_bg); /* 创建前景 */
lv_obj_set_size(obj_americano_top, 210, 480); /* 设置大小 */
lv_obj_set_style_bg_color(obj_americano_top, lv_color_hex(0x5A4942), 0); /* 设置背景颜色 */
lv_obj_align(obj_americano_top, LV_ALIGN_TOP_LEFT, 0, 0); /* 设置位置 */
lv_obj_set_style_border_width(obj_americano_top, 0, 0); /* 设置边框宽度 */
lv_obj_set_style_shadow_width(obj_americano_top, 0, 0); /* 设置阴影宽度 */
lv_obj_set_style_outline_width(obj_americano_top, 0, 0); /* 设置轮廓宽度 */
lv_obj_set_style_radius(obj_americano_top, 30, 0); /* 设置圆角 */
lv_obj_set_style_pad_all(obj_americano_top, 0, 0); /* 设置内部填充 */
/* 创建美式咖啡品种上方文本 */
lv_obj_t *label_americano_top = lv_label_create(obj_americano_top); /* 创建文本 */
lv_obj_align(label_americano_top, LV_ALIGN_TOP_MID, 0, 80); /* 设置位置 */
lv_label_set_text(label_americano_top, "120ml"); /* 设置显示的文本 */
lv_obj_set_style_text_font(label_americano_top, &lv_font_20, 0); /* 设置字体 */
lv_obj_set_style_text_color(label_americano_top, lv_color_hex(0xFFFFFF), 0); /* 设置文本颜色 */
/* 创建美式咖啡品种下方文本 */
lv_obj_t *label_americano_bottom = lv_label_create(obj_americano_top); /* 创建文本 */
lv_obj_align(label_americano_bottom, LV_ALIGN_TOP_MID, 0, 120); /* 设置位置 */
lv_label_set_text(label_americano_bottom, "Americano"); /* 设置显示的文本 */
lv_obj_set_style_text_font(label_americano_bottom, &lv_font_30, 0); /* 设置字体 */
lv_obj_set_style_text_color(label_americano_bottom, lv_color_hex(0xFFFFFF), 0); /* 设置文本颜色 */
/* 美式咖啡图片 */
lv_obj_t *img_americano = lv_img_create(obj_americano_top); /* 创建图片 */
lv_obj_set_size(img_americano, 140, 176); /* 设置大小 */
lv_obj_align(img_americano, LV_ALIGN_BOTTOM_MID, 0, -80); /* 设置位置 */
lv_img_set_src(img_americano, &americano_187); /* 设置图片源 */
/* 美式咖啡阴影图片 */
lv_obj_t *img_americano_shadow = lv_img_create(obj_americano_top); /* 创建图片 */
lv_obj_set_size(img_americano_shadow, 210, 64); /* 设置大小 */
lv_obj_align(img_americano_shadow, LV_ALIGN_BOTTOM_MID, 0, -25); /* 设置位置 */
lv_img_set_src(img_americano_shadow, &cup_shadow); /* 设置图片源 */
```
剩余的其他咖啡视图的创建方法类似，不同的是对其采用的方法不同，以白咖啡显示为例，其对齐时采用`LV_ALIGN_OUT_RIGHT_MID`对其方式，对其到`obj_americano_bg`对象的右侧。这样在显示上两个区域由于高度一致，对齐后正好在显示区域内相邻，呈现连续的显示。
```
/* 白咖啡品种背景 */
lv_obj_t *obj_flatwhite_bg = lv_obj_create(obj_top_bg); /* 创建背景 */
lv_obj_set_size(obj_flatwhite_bg, 210, 480); /* 设置大小 */
lv_obj_set_style_bg_color(obj_flatwhite_bg, lv_color_hex(0x5AAAB5), 0); /* 设置背景颜色 */
lv_obj_align_to(obj_flatwhite_bg, obj_americano_bg, LV_ALIGN_OUT_RIGHT_MID, 0, 0); /* 设置位置 */
lv_obj_set_style_border_width(obj_flatwhite_bg, 0, 0); /* 设置边框宽度 */
lv_obj_set_style_shadow_width(obj_flatwhite_bg, 0, 0); /* 设置阴影宽度 */
lv_obj_set_style_outline_width(obj_flatwhite_bg, 0, 0); /* 设置轮廓宽度 */
lv_obj_set_style_radius(obj_flatwhite_bg, 0, 0); /* 设置圆角 */
lv_obj_set_style_pad_all(obj_flatwhite_bg, 0, 0);
```
通过对源码的阅读，了解如何使用lvgl创建水平滚动的效果、以及设置滚动区域内显示内容的方法。ST峰会的现场实操环节提供的展示互动提供具体实现的方法，是很不错的活动。
滚动容器obj_bottom_bg会对超出的obj_top_bg区域实现横向滑动查看。
页:
[1]