How to rearrange items

Screenshot or video

  1. I want to arrange several items on one screen and display them by scrolling. Which widget can I use?

  2. In some cases items on the same screen may need to be rearranged. For example, items such as Total Amount and Dose Rate disappear and the rest of the items should be placed in order. How can I implement it?


  • SquareLine Studio version: 1.2.3
  • Operating system:
  • Target hardware: esp32, arduino framework
  1. Commonly used widgets were grouped and created as a component. After copying this component, the Label was changed and the coordinates were modified. In this way, it seems to be able to align invisible components that are placed under the screen. But it’s a bit inconvenient. Is there any easier way?

  2. The method I did to rearrange the items displayed on the screen according to the setting values when the button is pressed is as follows.

2.1 In the ‘Next’ button event, the screen to be displayed next is initialized again.

void ui_event_BtnPrescriptNext(lv_event_t *e)
    lv_event_code_t event_code = lv_event_get_code(e);
    lv_obj_t *target = lv_event_get_target(e);
    size_t buf_size = sizeof(buf);

    if (event_code == LV_EVENT_CLICKED)
        lv_dropdown_get_selected_str(ui_comp_get_child(ui_Set_Prescript_Comp2, UI_COMP_SET_PRESCRIPT_COMP_DROPDOWN1), buf, buf_size); 
        my_printf("dropdown str: %s, buf_size: %d\n", buf, buf_size);
        _ui_screen_change(ui_ScreenSetParam, LV_SCR_LOAD_ANIM_FADE_ON, 500, 0);

2.2 Conditionally activate the items displayed on the screen.

    if (strcmp(buf, "mL/hr") != 0)
        ui_Set_Param_Comp = ui_Set_Param_Comp_create(ui_PanelSetParamBody); 
        lv_obj_set_x(ui_Set_Param_Comp, 0);
        lv_obj_set_y(ui_Set_Param_Comp, -107);
        my_printf("Total Amount entered: %s\n", buf);
    ui_Set_Param_Comp1 = ui_Set_Param_Comp_create(ui_PanelSetParamBody); 
    lv_obj_set_x(ui_Set_Param_Comp1, 0);
    if (strcmp(buf, "mL/hr") == 0)
        lv_obj_set_y(ui_Set_Param_Comp1, -107);
        my_printf("Total Volume entered: %s\n", buf);

You an use the flex layout. It’s exactly for cases like this.

1 Like

In the video, there are two examples shown:

  1. Smartwatch.spj
  2. Smarthome.spj

I see that Smartwatch.spj is in SquareLine Studio example list.

However, I did not see the smarthome example in SLS.