Ho to add space between list elements

puzrin · October 25, 2019, 3:15pm

I have vertical list, page + containers. How can i add bottom margin to each list element (after each container)? Still could not understand relation between CSS and LVGL layout approaches.

Source:

github.com

puzrin/dispenser/blob/dev/src/screen_dose.cpp#L126-L187


page = lv_page_create(screen, NULL);
lv_page_set_anim_time(page, 150);
lv_page_set_style(page, LV_PAGE_STYLE_BG, &app_data.styles.main);
lv_page_set_style(page, LV_PAGE_STYLE_SCRL, &app_data.styles.main);
lv_page_set_sb_mode(page, LV_SB_MODE_OFF);
lv_page_set_scrl_layout(page, LV_LAYOUT_COL_L);
lv_obj_set_size(
    page,
    lv_obj_get_width(screen),
    lv_obj_get_height(lv_scr_act()) - LIST_MARGIN_TOP
);
lv_obj_set_pos(page, 0, LIST_MARGIN_TOP);


lv_obj_t * selected_item = NULL;


for (int i=0;; i++)
{
    dose_t dose = doses[i];


    if (dose.volume == 0) break;

This file has been truncated. show original

embeddedt · October 25, 2019, 4:28pm

I think you need padding on this style: https://github.com/puzrin/dispenser/blob/57579fa3d13edf1b3a1263c7c66c0afe4bafe991/src/screen_dose.cpp#L156

puzrin · October 25, 2019, 8:58pm

Hm…

body.padding.bottom for container (list item) does not help.
body.padding.inner for page (list) adds required space between items.

Is that normal? Can i see somewhere detailed description how styles are intended to work?

embeddedt · October 25, 2019, 9:03pm

Most of the information about styles can be found in the documentation.