LVGL 8.2 Sorting a List using up and down buttons

Defining variables

static lv_obj_t * list1;   // list Control 1
static lv_obj_t * list2;  // list Control 2
static lv_obj_t * currentButton = NULL;  //  Save current key 

list Control 1 Event callback function

static void event_handler(lv_event_t* e)
{
    
    lv_event_code_t code = lv_event_get_code(e); //  Get the event code generated by the object 
    lv_obj_t* obj = lv_event_get_target(e);  //  Get the object that generated the event 
    if (code == LV_EVENT_CLICKED) {
     //  Handle LV_EVENT_CLICKED event 
        LV_LOG_USER("Clicked: %s", lv_list_get_btn_text(list1, obj)); 
        if (currentButton == obj) {
      //  The current key and the clicked key object are the same 
            currentButton = NULL;  //　 Null pointer 
        }
        else {
    
            currentButton = obj; //  The current key points to the clicked key object 
        }
        lv_obj_t* parent = lv_obj_get_parent(obj); //  Get the parent object of the object that generated the event 
        uint32_t i;
        for (i = 0; i < lv_obj_get_child_cnt(parent); i++) {
     //  Process all child objects under the parent object 
            lv_obj_t* child = lv_obj_get_child(parent, i); // Get index i Corresponding sub objects 
            if (child == currentButton) {
     //  The sub object is the same as the currently saved key object 
                lv_obj_add_state(child, LV_STATE_CHECKED); //  Choose 
            }
            else {
    
                lv_obj_clear_state(child, LV_STATE_CHECKED); //  Unchecked 
            }
        }
    }
}

list Control 2 Medium top Key callback function

static void event_handler_top(lv_event_t* e)
{
    
    lv_event_code_t code = lv_event_get_code(e); //  Get the event code generated by the object 
    if (code == LV_EVENT_CLICKED) {
     //  Handle LV_EVENT_CLICKED event 
        if (currentButton == NULL) return; // No selection , Skip directly without processing 
        lv_obj_move_background(currentButton); // The current key moves to the background interface 
        lv_obj_scroll_to_view(currentButton, LV_ANIM_ON); // Scroll to an object until it becomes visible on its parent
    }
}

list Control 2 Medium Up Key callback function

static void event_handler_up(lv_event_t * e)
{
    
lv_event_code_t code = lv_event_get_code(e); //  Get the event code generated by the object 
if((code == LV_EVENT_CLICKED) || (code == LV_EVENT_LONG_PRESSED_REPEAT)) {
     // Handle click and long press repeat events 
if(currentButton == NULL) return; // No selection , Skip directly without processing 
uint32_t index = lv_obj_get_index(currentButton); // Get the current key in List Index in 
if(index <= 0) return; // If it is already the first button , Skip directly without processing 
lv_obj_move_to_index(currentButton, index - 1); //  Move the current key to the previous position 
lv_obj_scroll_to_view(currentButton, LV_ANIM_ON);// Scroll to an object until it becomes visible on its parent
}
}

list Control 2 Medium Center Key callback function

static void event_handler_center(lv_event_t* e)
{
    
    const lv_event_code_t code = lv_event_get_code(e);  //  Get the event code generated by the object 
    if ((code == LV_EVENT_CLICKED) || (code == LV_EVENT_LONG_PRESSED_REPEAT)) {
    // Handle click and long press repeat events 
        if (currentButton == NULL) return; // No selection , Skip directly without processing 
        lv_obj_t* parent = lv_obj_get_parent(currentButton); // Get the parent object of the current key 
        const uint32_t pos = lv_obj_get_child_cnt(parent) / 2; // Calculate the number of all controls and take the middle position 
        lv_obj_move_to_index(currentButton, pos); // Move to the current key to pos Corresponding position 
        lv_obj_scroll_to_view(currentButton, LV_ANIM_ON);// Scroll to an object until it becomes visible on its parent
    }
}

list Control 2 Medium Down Key callback function

static void event_handler_dn(lv_event_t* e)
{
    
    const lv_event_code_t code = lv_event_get_code(e);//  Get the event code generated by the object 
    if ((code == LV_EVENT_CLICKED) || (code == LV_EVENT_LONG_PRESSED_REPEAT)) {
    // Handle click and long press repeat events 
        if (currentButton == NULL) return; // No selection , Skip directly without processing 
        const uint32_t index = lv_obj_get_index(currentButton); // Get the current key in List Index in 
        lv_obj_move_to_index(currentButton, index + 1);// Move the current key to the next position 
        lv_obj_scroll_to_view(currentButton, LV_ANIM_ON);// Scroll to an object until it becomes visible on its parent
    }
}

list Control 2 Medium Bottom Key callback function

static void event_handler_bottom(lv_event_t* e)
{
    
    const lv_event_code_t code = lv_event_get_code(e);//  Get the event code generated by the object 
    if (code == LV_EVENT_CLICKED) {
      //  Handle LV_EVENT_CLICKED event 
        if (currentButton == NULL) return;// No selection , Skip directly without processing 
        lv_obj_move_foreground(currentButton);  // Move the current key to foreground
        lv_obj_scroll_to_view(currentButton, LV_ANIM_ON);// Scroll to an object until it becomes visible on its parent
    }
}

list Control 2 Medium Shuffle Key callback function

static void event_handler_swap(lv_event_t* e)
{
    
    const lv_event_code_t code = lv_event_get_code(e);//  Get the event code generated by the object 
    // lv_obj_t* obj = lv_event_get_target(e);
    if ((code == LV_EVENT_CLICKED) || (code == LV_EVENT_LONG_PRESSED_REPEAT)) {
    // Handle click and long press repeat events 
        uint32_t cnt = lv_obj_get_child_cnt(list1); //  obtain List Control 1 Number of children of 
        for (int i = 0; i < 100; i++)
            if (cnt > 1) {
    
                lv_obj_t* obj = lv_obj_get_child(list1, rand() % cnt); // Generate random subitems 
                lv_obj_move_to_index(obj, rand() % cnt);// Children move to random positions 
                if (currentButton != NULL) {
     
                    lv_obj_scroll_to_view(currentButton, LV_ANIM_ON);// Scroll to an object until it becomes visible on its parent
                }
            }
    }
}

establish List Control

static void lv_example_list_2(void)
{
    
    /*Create a list*/
    list1 = lv_list_create(lv_scr_act());  //  establish List Control 1 object 
    lv_obj_set_size(list1, lv_pct(60), lv_pct(100)); //  Set size 
    lv_obj_set_style_pad_row(list1, 5, 0);  // Set the spacing between rows 
    /*Add buttons to the list*/
    lv_obj_t* btn;
    int i;
    for (i = 0; i < 15; i++) {
     // establish 15 A button 
        btn = lv_btn_create(list1);  // Create a key object 
        lv_obj_set_width(btn, lv_pct(50)); // Set width 
        lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL); // Add key click event 
        lv_obj_t* lab = lv_label_create(btn); //  Create... On the key Label object 
        lv_label_set_text_fmt(lab, "Item %d", i); // Set display content 
    }
    /*Select the first button by default*/
    currentButton = lv_obj_get_child(list1, 0); // The current key defaults to the first key 
    lv_obj_add_state(currentButton, LV_STATE_CHECKED); //  Set the current key as selected 
    /*Create a second list with up and down buttons*/
    list2 = lv_list_create(lv_scr_act());  //  establish List Control 2 object 
    lv_obj_set_size(list2, lv_pct(40), lv_pct(100));  //  Set size 
    lv_obj_align(list2, LV_ALIGN_TOP_RIGHT, 0, 0); // LV_ALIGN_TOP_RIGHT Alignment 
    lv_obj_set_flex_flow(list2, LV_FLEX_FLOW_COLUMN);// Set up LV_FLEX_FLOW_COLUMN Layout 
    btn = lv_list_add_btn(list2, NULL, "Top"); // add to Top Key 
    lv_obj_add_event_cb(btn, event_handler_top, LV_EVENT_ALL, NULL);// Register all events 
    lv_group_remove_obj(btn); // take btn from group Remove 
    btn = lv_list_add_btn(list2, LV_SYMBOL_UP, "Up");// add to Up Key 
    lv_obj_add_event_cb(btn, event_handler_up, LV_EVENT_ALL, NULL);// Register all events 
    lv_group_remove_obj(btn);// take btn from group Remove 
    btn = lv_list_add_btn(list2, LV_SYMBOL_LEFT, "Center");// add to Center Key 
    lv_obj_add_event_cb(btn, event_handler_center, LV_EVENT_ALL, NULL);// Register all events 
    lv_group_remove_obj(btn);// take btn from group Remove 
    btn = lv_list_add_btn(list2, LV_SYMBOL_DOWN, "Down");// add to Down Key 
    lv_obj_add_event_cb(btn, event_handler_dn, LV_EVENT_ALL, NULL);// Register all events 
    lv_group_remove_obj(btn);// take btn from group Remove 
    btn = lv_list_add_btn(list2, NULL, "Bottom");// add to Bottom Key 
    lv_obj_add_event_cb(btn, event_handler_bottom, LV_EVENT_ALL, NULL);// Register all events 
    lv_group_remove_obj(btn);// take btn from group Remove 
    btn = lv_list_add_btn(list2, LV_SYMBOL_SHUFFLE, "Shuffle");// add to Shuffle Key 
    lv_obj_add_event_cb(btn, event_handler_swap, LV_EVENT_ALL, NULL);// Register all events 
    lv_group_remove_obj(btn);// take btn from group Remove 
}

Running effect