lvgl_obj_align
时间: 2024-08-16 18:01:01 浏览: 55
`lvgl_obj_align` 函数在 LittlevGL(LVGL)库中主要用于对齐对象。它允许你在父容器内精确地定位子对象,支持多种对齐模式,包括顶部、底部、左侧、右侧、居中等。这个函数需要三个参数:
1. `parent`:父容器对象,你想在这个容器内部对齐子元素。
2. `child`:子元素对象,你要对齐的对象。
3. `align`:对齐策略,如 `LV_ALIGN_TOP_LEFT` 对于左上角对齐,`LV_ALIGN_CENTER` 对于居中对齐等。
例如,`lv_obj_align(parent, child, LV_ALIGN_CENTER)` 就会将 `child` 对齐到 `parent` 的中心位置。
相关问题
void lv_example_scroll_2_dir(void) { #if 1 lv_obj_t* cont = lv_obj_create(lv_scr_act()); lv_obj_set_size(cont, 400, 300); lv_obj_add_flag(cont, LV_OBJ_FLAG_SCROLL_ONE); /*Allow max 1 page swipe*/ lv_obj_set_scroll_snap_x(cont, LV_SCROLL_SNAP_CENTER); /*Snap a page to the center*/ lv_obj_set_scrollbar_mode(cont, LV_SCROLLBAR_MODE_OFF); lv_obj_add_event_cb(cont, scroll_end_event, LV_EVENT_SCROLL_BEGIN/*LV_EVENT_ALL*//*LV_EVENT_SCROLL*//*LV_EVENT_SCROLL_END*/, NULL); lv_obj_add_event_cb(cont, scroll_end_event, LV_EVENT_SCROLL_END, NULL); lv_obj_center(cont); /*A grid for the left center and right pages*/ lv_coord_t col_dsc[] = { LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_TEMPLATE_LAST }; lv_coord_t row_dsc[] = { LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST }; lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc); /*Create 5 pages*/ for (int i = 0; i < 10; i++) { lv_obj_t* obj = lv_obj_create(cont); lv_obj_set_size(obj, lv_pct(33), lv_pct(100)); lv_obj_t* label = lv_label_create(obj); lv_label_set_text_fmt(label, "Page %d", i); lv_obj_set_style_border_width(obj, 0, 0); } /*Page 2, 3 hidden, page 4, 0, 1 are placed to the grid */ //lv_obj_add_flag(lv_obj_get_child(cont, 2), LV_OBJ_FLAG_HIDDEN); //lv_obj_add_flag(lv_obj_get_child(cont, 3), LV_OBJ_FLAG_HIDDEN); //lv_obj_set_grid_cell(lv_obj_get_child(cont, 4), LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_CENTER, 0, 1); //lv_obj_set_grid_cell(lv_obj_get_child(cont, 0), LV_GRID_ALIGN_CENTER, 1, 1, LV_GRID_ALIGN_CENTER, 0, 1); //lv_obj_set_grid_cell(lv_obj_get_child(cont, 1), LV_GRID_ALIGN_CENTER, 2, 1, LV_GRID_ALIGN_CENTER, 0, 1); lv_obj_set_grid_cell(lv_obj_get_child(cont, 0), LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_CENTER, 0, 1); lv_obj_set_grid_cell(lv_obj_get_child(cont, 1), LV_GRID_ALIGN_CENTER, 1, 1, LV_GRID_ALIGN_CENTER, 0, 1); lv_obj_set_grid_cell(lv_obj_get_child(cont, 2), LV_GRID_ALIGN_CENTER, 2, 1, LV_GRID_ALIGN_CENTER, 0, 1); lv_obj_set_grid_cell(lv_obj_get_child(cont, 3), LV_GRID_ALIGN_CENTER, 3, 1, LV_GRID_ALIGN_CENTER, 0, 1); lv_obj_set_grid_cell(lv_obj_get_child(cont, 4), LV_GRID_ALIGN_CENTER, 4, 1, LV_GRID_ALIGN_CENTER, 0, 1); /*Be sure page 0 is centered*/ lv_obj_scroll_to_view(lv_obj_get_child(cont, 0), LV_ANIM_OFF); }帮我注释一下这段代码
这段代码是 LittlevGL (LVGL)的示例代码,实现了一个可以左右滑动的页面(类似于轮播图),页面可以居中对齐。下面是代码注释:
```C
void lv_example_scroll_2_dir(void) {
/*创建一个容器,作为滑动页面的容器*/
lv_obj_t* cont = lv_obj_create(lv_scr_act());
lv_obj_set_size(cont, 400, 300);
/*设置容器只能左右滑动一页*/
lv_obj_add_flag(cont, LV_OBJ_FLAG_SCROLL_ONE);
/*设置容器滑动时,页面停留在中心*/
lv_obj_set_scroll_snap_x(cont, LV_SCROLL_SNAP_CENTER);
/*关闭滚动条*/
lv_obj_set_scrollbar_mode(cont, LV_SCROLLBAR_MODE_OFF);
/*容器添加滑动事件*/
lv_obj_add_event_cb(cont, scroll_end_event, LV_EVENT_SCROLL_BEGIN/*LV_EVENT_ALL*//*LV_EVENT_SCROLL*//*LV_EVENT_SCROLL_END*/, NULL);
lv_obj_add_event_cb(cont, scroll_end_event, LV_EVENT_SCROLL_END, NULL);
/*容器居中*/
lv_obj_center(cont);
/*创建一个网格,用于布局页面*/
lv_coord_t col_dsc[] = { LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_TEMPLATE_LAST };
lv_coord_t row_dsc[] = { LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST };
lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);
/*创建 10 个页面*/
for (int i = 0; i < 10; i++) {
lv_obj_t* obj = lv_obj_create(cont);
lv_obj_set_size(obj, lv_pct(33), lv_pct(100));
lv_obj_t* label = lv_label_create(obj);
lv_label_set_text_fmt(label, "Page %d", i);
lv_obj_set_style_border_width(obj, 0, 0);
}
/*将第 0、1、2、3、4 个页面放到网格中,使它们居中*/
lv_obj_set_grid_cell(lv_obj_get_child(cont, 0), LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_CENTER, 0, 1);
lv_obj_set_grid_cell(lv_obj_get_child(cont, 1), LV_GRID_ALIGN_CENTER, 1, 1, LV_GRID_ALIGN_CENTER, 0, 1);
lv_obj_set_grid_cell(lv_obj_get_child(cont, 2), LV_GRID_ALIGN_CENTER, 2, 1, LV_GRID_ALIGN_CENTER, 0, 1);
lv_obj_set_grid_cell(lv_obj_get_child(cont, 3), LV_GRID_ALIGN_CENTER, 3, 1, LV_GRID_ALIGN_CENTER, 0, 1);
lv_obj_set_grid_cell(lv_obj_get_child(cont, 4), LV_GRID_ALIGN_CENTER, 4, 1, LV_GRID_ALIGN_CENTER, 0, 1);
/*将第 2、3 个页面隐藏*/
//lv_obj_add_flag(lv_obj_get_child(cont, 2), LV_OBJ_FLAG_HIDDEN);
//lv_obj_add_flag(lv_obj_get_child(cont, 3), LV_OBJ_FLAG_HIDDEN);
/*将页面 0 居中显示*/
lv_obj_scroll_to_view(lv_obj_get_child(cont, 0), LV_ANIM_OFF);
}
```
注释中已经解释了每一行代码的作用,其中有些代码是被注释掉了的,这可能是作者在开发过程中的调试代码。
void lv_obj_set_flex_grow(lv_obj_t * obj, uint8_t grow); void lv_style_set_flex_flow(lv_style_t * style, lv_flex_flow_t value); void lv_style_set_flex_main_place(lv_style_t * style, lv_flex_align_t value); void lv_style_set_flex_cross_place(lv_style_t * style, lv_flex_align_t value); void lv_style_set_flex_track_place(lv_style_t * style, lv_flex_align_t value); void lv_style_set_flex_grow(lv_style_t * style, uint8_t value); void lv_obj_set_style_flex_flow(lv_obj_t * obj, lv_flex_flow_t value, lv_style_selector_t selector); void lv_obj_set_style_flex_main_place(lv_obj_t * obj, lv_flex_align_t value, lv_style_selector_t selector); void lv_obj_set_style_flex_cross_place(lv_obj_t * obj, lv_flex_align_t value, lv_style_selector_t selector); void lv_obj_set_style_flex_track_place(lv_obj_t * obj, lv_flex_align_t value, lv_style_selector_t selector); void lv_obj_set_style_flex_grow(lv_obj_t * obj, uint8_t value, lv_style_selector_t selector);
这些函数都是用于设置 LVGL 中的 Flexbox 布局相关的属性。
- `void lv_obj_set_flex_grow(lv_obj_t * obj, uint8_t grow);` 用于设置一个对象在 Flexbox 布局中的 grow 属性值,即当有多余的空间时,该对象能够按照比例分配多余的空间。grow 属性值越大,该对象获得的多余空间就越多。
- `void lv_style_set_flex_flow(lv_style_t * style, lv_flex_flow_t value);` 用于设置样式中 Flexbox 布局的 flow 属性,即 Flexbox 中主轴和交叉轴的方向。
- `void lv_style_set_flex_main_place(lv_style_t * style, lv_flex_align_t value);` 用于设置样式中 Flexbox 布局中主轴对齐方式。
- `void lv_style_set_flex_cross_place(lv_style_t * style, lv_flex_align_t value);` 用于设置样式中 Flexbox 布局中交叉轴对齐方式。
- `void lv_style_set_flex_track_place(lv_style_t * style, lv_flex_align_t value);` 用于设置样式中 Flexbox 布局中 track 对齐方式。
- `void lv_style_set_flex_grow(lv_style_t * style, uint8_t value);` 用于设置样式中 Flexbox 布局中对象的 grow 属性值。
- `void lv_obj_set_style_flex_flow(lv_obj_t * obj, lv_flex_flow_t value, lv_style_selector_t selector);` 用于设置一个对象在指定的样式选择器中的 Flexbox 布局的 flow 属性。
- `void lv_obj_set_style_flex_main_place(lv_obj_t * obj, lv_flex_align_t value, lv_style_selector_t selector);` 用于设置一个对象在指定的样式选择器中的 Flexbox 布局中主轴对齐方式。
- `void lv_obj_set_style_flex_cross_place(lv_obj_t * obj, lv_flex_align_t value, lv_style_selector_t selector);` 用于设置一个对象在指定的样式选择器中的 Flexbox 布局中交叉轴对齐方式。
- `void lv_obj_set_style_flex_track_place(lv_obj_t * obj, lv_flex_align_t value, lv_style_selector_t selector);` 用于设置一个对象在指定的样式选择器中的 Flexbox 布局中 track 对齐方式。
- `void lv_obj_set_style_flex_grow(lv_obj_t * obj, uint8_t value, lv_style_selector_t selector);` 用于设置一个对象在指定的样式选择器中的 Flexbox 布局的 grow 属性值。
阅读全文