LVGL 8.2 Sorting a List using up and down buttons

定义变量

static lv_obj_t * list1;   // list控件1
static lv_obj_t * list2;  // list控件2
static lv_obj_t * currentButton = NULL;  // 保存当前按键

list控件1事件回调函数

static void event_handler(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e); // 获取对象产生的事件码
    lv_obj_t* obj = lv_event_get_target(e);  // 获取产生事件的对象
    if (code == LV_EVENT_CLICKED) { // 处理LV_EVENT_CLICKED事件
        LV_LOG_USER("Clicked: %s", lv_list_get_btn_text(list1, obj)); 
        if (currentButton == obj) {  // 当前按键和点击的按键对象相同
            currentButton = NULL;  //　赋空指针
        }
        else {
            currentButton = obj; // 当前按键指向点击的按键对象
        }
        lv_obj_t* parent = lv_obj_get_parent(obj); // 获取产生事件的对象的父对象
        uint32_t i;
        for (i = 0; i < lv_obj_get_child_cnt(parent); i++) { // 处理父对象下的所有子对象
            lv_obj_t* child = lv_obj_get_child(parent, i); //获取索引i对应的子对象
            if (child == currentButton) { // 子对象和当前保存的按键对象相同
                lv_obj_add_state(child, LV_STATE_CHECKED); // 选中
            }
            else {
                lv_obj_clear_state(child, LV_STATE_CHECKED); // 不选中
            }
        }
    }
}

list控件2中的top按键回调函数

static void event_handler_top(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e); // 获取对象产生的事件码
    if (code == LV_EVENT_CLICKED) { // 处理LV_EVENT_CLICKED事件
        if (currentButton == NULL) return; //未有选中项,直接跳过不处理
        lv_obj_move_background(currentButton); //当前按键移动到背景界面
        lv_obj_scroll_to_view(currentButton, LV_ANIM_ON); // Scroll to an object until it becomes visible on its parent
    }
}

list控件2中的Up按键回调函数

static void event_handler_up(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e); // 获取对象产生的事件码
if((code == LV_EVENT_CLICKED) || (code == LV_EVENT_LONG_PRESSED_REPEAT)) { //处理单击和长按重复事件
if(currentButton == NULL) return; //未有选中项,直接跳过不处理
uint32_t index = lv_obj_get_index(currentButton); //获取当前按键在List中的索引
if(index <= 0) return; //如果已经是第一个按键，直接跳过不处理
lv_obj_move_to_index(currentButton, index - 1); // 移动当前按键到上一个位置
lv_obj_scroll_to_view(currentButton, LV_ANIM_ON);// Scroll to an object until it becomes visible on its parent
}
}

list控件2中的Center按键回调函数

static void event_handler_center(lv_event_t* e)
{
    const lv_event_code_t code = lv_event_get_code(e);  // 获取对象产生的事件码
    if ((code == LV_EVENT_CLICKED) || (code == LV_EVENT_LONG_PRESSED_REPEAT)) {//处理单击和长按重复事件
        if (currentButton == NULL) return; //未有选中项,直接跳过不处理
        lv_obj_t* parent = lv_obj_get_parent(currentButton); //获取当前按键的父对象
        const uint32_t pos = lv_obj_get_child_cnt(parent) / 2; //计算所有控制的个数取中间位置
        lv_obj_move_to_index(currentButton, pos); //移到当前按键到pos对应的位置
        lv_obj_scroll_to_view(currentButton, LV_ANIM_ON);// Scroll to an object until it becomes visible on its parent
    }
}

list控件2中的Down按键回调函数

static void event_handler_dn(lv_event_t* e)
{
    const lv_event_code_t code = lv_event_get_code(e);// 获取对象产生的事件码
    if ((code == LV_EVENT_CLICKED) || (code == LV_EVENT_LONG_PRESSED_REPEAT)) {//处理单击和长按重复事件
        if (currentButton == NULL) return; //未有选中项,直接跳过不处理
        const uint32_t index = lv_obj_get_index(currentButton); //获取当前按键在List中的索引
        lv_obj_move_to_index(currentButton, index + 1);//移动当前按键到下一个位置
        lv_obj_scroll_to_view(currentButton, LV_ANIM_ON);// Scroll to an object until it becomes visible on its parent
    }
}

list控件2中的Bottom按键回调函数

static void event_handler_bottom(lv_event_t* e)
{
    const lv_event_code_t code = lv_event_get_code(e);// 获取对象产生的事件码
    if (code == LV_EVENT_CLICKED) {  // 处理LV_EVENT_CLICKED事件
        if (currentButton == NULL) return;//未有选中项,直接跳过不处理
        lv_obj_move_foreground(currentButton);  //移动当前按键到foreground
        lv_obj_scroll_to_view(currentButton, LV_ANIM_ON);// Scroll to an object until it becomes visible on its parent
    }
}

list控件2中的Shuffle按键回调函数

static void event_handler_swap(lv_event_t* e)
{
    const lv_event_code_t code = lv_event_get_code(e);// 获取对象产生的事件码
    // lv_obj_t* obj = lv_event_get_target(e);
    if ((code == LV_EVENT_CLICKED) || (code == LV_EVENT_LONG_PRESSED_REPEAT)) {//处理单击和长按重复事件
        uint32_t cnt = lv_obj_get_child_cnt(list1); // 获取List控件1的子项个数
        for (int i = 0; i < 100; i++)
            if (cnt > 1) {
                lv_obj_t* obj = lv_obj_get_child(list1, rand() % cnt); //产生随机子项
                lv_obj_move_to_index(obj, rand() % cnt);//子项移动到随机位置
                if (currentButton != NULL) { 
                    lv_obj_scroll_to_view(currentButton, LV_ANIM_ON);// Scroll to an object until it becomes visible on its parent
                }
            }
    }
}

创建List控件

static void lv_example_list_2(void)
{
    /*Create a list*/
    list1 = lv_list_create(lv_scr_act());  // 创建List控件1对象
    lv_obj_set_size(list1, lv_pct(60), lv_pct(100)); // 设置大小
    lv_obj_set_style_pad_row(list1, 5, 0);  //设置行与行之间的间距
    /*Add buttons to the list*/
    lv_obj_t* btn;
    int i;
    for (i = 0; i < 15; i++) { //创建15个按键
        btn = lv_btn_create(list1);  //创建按键对象
        lv_obj_set_width(btn, lv_pct(50)); //设置宽度
        lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL); //添加按键点击事件
        lv_obj_t* lab = lv_label_create(btn); // 在按键上创建Label对象
        lv_label_set_text_fmt(lab, "Item %d", i); //设置显示内容
    }
    /*Select the first button by default*/
    currentButton = lv_obj_get_child(list1, 0); //当前按键默认为第一个按键
    lv_obj_add_state(currentButton, LV_STATE_CHECKED); // 设置当前按键为选中状态
    /*Create a second list with up and down buttons*/
    list2 = lv_list_create(lv_scr_act());  // 创建List控件2对象
    lv_obj_set_size(list2, lv_pct(40), lv_pct(100));  // 设置大小
    lv_obj_align(list2, LV_ALIGN_TOP_RIGHT, 0, 0); // LV_ALIGN_TOP_RIGHT方式对齐
    lv_obj_set_flex_flow(list2, LV_FLEX_FLOW_COLUMN);//设置LV_FLEX_FLOW_COLUMN布局
    btn = lv_list_add_btn(list2, NULL, "Top"); //添加Top按键
    lv_obj_add_event_cb(btn, event_handler_top, LV_EVENT_ALL, NULL);//注册所有事件
    lv_group_remove_obj(btn); //将btn从group中移除
    btn = lv_list_add_btn(list2, LV_SYMBOL_UP, "Up");//添加Up按键
    lv_obj_add_event_cb(btn, event_handler_up, LV_EVENT_ALL, NULL);//注册所有事件
    lv_group_remove_obj(btn);//将btn从group中移除
    btn = lv_list_add_btn(list2, LV_SYMBOL_LEFT, "Center");//添加Center按键
    lv_obj_add_event_cb(btn, event_handler_center, LV_EVENT_ALL, NULL);//注册所有事件
    lv_group_remove_obj(btn);//将btn从group中移除
    btn = lv_list_add_btn(list2, LV_SYMBOL_DOWN, "Down");//添加Down按键
    lv_obj_add_event_cb(btn, event_handler_dn, LV_EVENT_ALL, NULL);//注册所有事件
    lv_group_remove_obj(btn);//将btn从group中移除
    btn = lv_list_add_btn(list2, NULL, "Bottom");//添加Bottom按键
    lv_obj_add_event_cb(btn, event_handler_bottom, LV_EVENT_ALL, NULL);//注册所有事件
    lv_group_remove_obj(btn);//将btn从group中移除
    btn = lv_list_add_btn(list2, LV_SYMBOL_SHUFFLE, "Shuffle");//添加Shuffle按键
    lv_obj_add_event_cb(btn, event_handler_swap, LV_EVENT_ALL, NULL);//注册所有事件
    lv_group_remove_obj(btn);//将btn从group中移除
}

运行效果