Description
How to make child objects (ie within a container) automatically grow to fill the parent
What MCU/Processor/Board and compiler are you using?
Custom board, based on nrf52
What LVGL version are you using?
7.x
What do you want to achieve?
I’d like to be able to set up a container and when objects are added to it those objects are automatically sized to fill the available space in the container, ie without explicitly setting the height or width of the child objects.
For example, if I have a container with a row of buttons, the buttons would be equally sized across the row (which appears to work via lv_cont_set_layout() ), and would also have a height equal to the container (allowing for padding and margins).
From what I read, the container takes an inside–>out approach to sizing constraints, where as I am thinking about an outside --> in. This will mean that the sizing of the ‘internal’ objects flows from the size of the screen and padding.
What have you tried so far?
At the moment, the size of the child objects needs to be set explicitly. (not the most onerous workaround!).
I wouldn’t be surprised if this functionality isn’t already implemented and I’m just setting up the container layout wrong.
Code to reproduce
In the following example, the buttons are laid out in a row along the top but are just their default size, ie they do not expand to fill the container. If one button is made bigger then the buttons are horizontally center aligned (due to LV_LAYOUT_PRETTY_MID)
lv_obj_t *frame = lv_obj_create(NULL, NULL);
static lv_style_t frame_style;
lv_style_init(&frame_style);
lv_style_set_pad_inner(&frame_style, LV_STATE_DEFAULT, 5);
lv_style_set_pad_top(&frame_style, LV_STATE_DEFAULT, 10);
lv_style_set_pad_left(&frame_style, LV_STATE_DEFAULT, 10);
lv_style_set_pad_right(&frame_style, LV_STATE_DEFAULT, 10);
lv_style_set_pad_bottom(&frame_style, LV_STATE_DEFAULT, 10);
lv_obj_add_style(frame, LV_OBJ_PART_MAIN, &frame_style);
static lv_style_t style;
lv_style_init(&style);
lv_style_set_radius(&style, LV_STATE_DEFAULT, 8);
lv_style_set_bg_opa(&style, LV_STATE_DEFAULT, LV_OPA_COVER);
lv_style_set_bg_color(&style, LV_STATE_DEFAULT, LV_COLOR_SILVER);
lv_style_set_text_font(&style, LV_STATE_DEFAULT, &lv_font_montserrat_24);
lv_style_set_border_width(&style, LV_STATE_FOCUSED, 2);
lv_style_set_border_color(&style, LV_STATE_FOCUSED, LV_COLOR_BLUE);
lv_obj_t * cont = lv_cont_create(frame, NULL);
lv_cont_set_fit(cont, LV_FIT_PARENT);
lv_cont_set_layout(cont, LV_LAYOUT_PRETTY_MID);
int h = lv_obj_get_height(cont);
{
lv_obj_t *p_btn1 = lv_btn_create(cont, NULL);
lv_obj_add_style(p_btn1, LV_OBJ_PART_MAIN, &style);
//lv_obj_set_height(p_btn1, 120);
//lv_obj_set_width_fit(p_btn1, 60);
lv_obj_t *p_label;
p_label = lv_label_create(p_btn1, NULL);
lv_label_set_text(p_label, "B1");
}
{
lv_obj_t *p_btn2 = lv_btn_create(cont, NULL);
lv_obj_add_style(p_btn2, LV_OBJ_PART_MAIN, &style);
//lv_obj_set_height(p_btn2, h);
//lv_obj_set_width_fit(p_btn2, 60);
lv_obj_t *p_label2;
p_label2 = lv_label_create(p_btn2, NULL);
lv_label_set_text(p_label2, "B2");
}
{
lv_obj_t *p_btn3 = lv_btn_create(cont, NULL);
lv_obj_add_style(p_btn3, LV_OBJ_PART_MAIN, &style);
//lv_obj_set_width_fit(p_btn3, 60);
lv_obj_t *p_label3;
p_label3 = lv_label_create(p_btn3, NULL);
lv_label_set_text(p_label3, "B3");
}