LVGL 8.2 Checkboxes as radio buttons

风雨依依

已于 2023-03-14 07:15:01 修改

阅读量1.3k

点赞数 1

分类专栏： little VGL C/C++ 文章标签： LVGL 8.2 radio buttons

于 2022-06-26 10:26:10 首次发布

本文链接：https://blog.csdn.net/mygod2008ok/article/details/125467010

版权

C/C++ 同时被 2 个专栏收录

164 篇文章

订阅专栏

little VGL

133 篇文章

订阅专栏

变量定义

static lv_style_t style_radio;
static lv_style_t style_radio_chk;
static uint32_t active_index_1 = 0;
static uint32_t active_index_2 = 0;

事件处理回调函数

static void radio_event_handler(lv_event_t* e)
{
    uint32_t* active_id = lv_event_get_user_data(e); //获取用户数据
    lv_obj_t* cont = lv_event_get_current_target(e); // 获取当前目标事件的布局对象
    lv_obj_t* act_cb = lv_event_get_target(e);//获取产生事件的对象
    lv_obj_t* old_cb = lv_obj_get_child(cont, *active_id); //根据id序号获取子对象
    /*Do nothing if the container was clicked*/
    if (act_cb == cont) return; //不处理layout布局对象产生的事件
    lv_obj_clear_state(old_cb, LV_STATE_CHECKED); //清除先前的选择状态
    lv_obj_add_state(act_cb, LV_STATE_CHECKED); // 设置点击的对象为选中状态
    *active_id = lv_obj_get_index(act_cb); //获取选中对象的id序号并保存在active_id所指向的内存中
    LV_LOG_USER("Selected radio buttons: %d, %d", (int)active_index_1, (int)active_index_2); //打印active_index_1，active_index_2
}

radio创建

static void radiobutton_create(lv_obj_t* parent, const char* txt)
{
    lv_obj_t* obj = lv_checkbox_create(parent);  //在parent对象上创建checkbox对象
    lv_checkbox_set_text(obj, txt);  // 设置文本为txt指针中的内容
    lv_obj_add_flag(obj, LV_OBJ_FLAG_EVENT_BUBBLE); // 添加LV_OBJ_FLAG_EVENT_BUBBLE标志
    lv_obj_add_style(obj, &style_radio, LV_PART_INDICATOR); //obj对象的LV_PART_INDICATO属性部分使用style_radio
    lv_obj_add_style(obj, &style_radio_chk, LV_PART_INDICATOR | LV_STATE_CHECKED); // obj对象的LV_PART_INDICATO和LV_STATE_CHECKED属性部分使用style_radio_chk
}

Checkboxes as radio buttons

/**
* Checkboxes as radio buttons
*/
static void lv_example_checkbox_2(void)
{
    /* The idea is to enable `LV_OBJ_FLAG_EVENT_BUBBLE` on checkboxes and process the
    * `LV_EVENT_CLICKED` on the container.
    * A variable is passed as event user data where the index of the active
    * radiobutton is saved */
    lv_style_init(&style_radio);  //初时化style_radio
    lv_style_set_radius(&style_radio, LV_RADIUS_CIRCLE); //设置倒角为圆形
    lv_style_init(&style_radio_chk); //初时化style_radio_chk
    lv_style_set_bg_img_src(&style_radio_chk, NULL); //设置背景图标资源为NULL
    uint32_t i;
    char buf[32];
    lv_obj_t* cont1 = lv_obj_create(lv_scr_act());  //创建对象用于layout
    lv_obj_set_flex_flow(cont1, LV_FLEX_FLOW_COLUMN);//设置布局为LV_FLEX_FLOW_COLUMN方式
    lv_obj_set_size(cont1, lv_pct(40), lv_pct(80)); //设置大小
    lv_obj_add_event_cb(cont1, radio_event_handler, LV_EVENT_CLICKED, &active_index_1); // 添加LV_EVENT_CLICKED事件，用户自定义数据为active_index_1
    for (i = 0; i < 5; i++) {
        lv_snprintf(buf, sizeof(buf), "A %d", (int)i + 1);
        radiobutton_create(cont1, buf);  //共创建5个radio按键
    }
    /*Make the first checkbox checked*/
    lv_obj_add_state(lv_obj_get_child(cont1, 0), LV_STATE_CHECKED); //选中第1个radio
    lv_obj_t* cont2 = lv_obj_create(lv_scr_act()); //创建对象用于layout
    lv_obj_set_flex_flow(cont2, LV_FLEX_FLOW_COLUMN);//设置布局为LV_FLEX_FLOW_COLUMN方式
    lv_obj_set_size(cont2, lv_pct(40), lv_pct(80)); //设置大小
    lv_obj_set_x(cont2, lv_pct(50)); //设置cont2布局x位置为屏慕的50%处
    lv_obj_add_event_cb(cont2, radio_event_handler, LV_EVENT_CLICKED, &active_index_2);// 添加LV_EVENT_CLICKED事件，用户自定义数据为active_index_2
    for (i = 0; i < 3; i++) {
        lv_snprintf(buf, sizeof(buf), "B %d", (int)i + 1);
        radiobutton_create(cont2, buf);  //共创建3个radio按键
    }
    /*Make the first checkbox checked*/
    lv_obj_add_state(lv_obj_get_child(cont2, 0), LV_STATE_CHECKED);//选中第1个radio
}

运行效果

在这里插入图片描述

将radiobutton_create函数中的lv_obj_add_flag注释掉

static void radiobutton_create(lv_obj_t* parent, const char* txt)
{
    lv_obj_t* obj = lv_checkbox_create(parent);
    lv_checkbox_set_text(obj, txt);
  //  lv_obj_add_flag(obj, LV_OBJ_FLAG_EVENT_BUBBLE);
    lv_obj_add_style(obj, &style_radio, LV_PART_INDICATOR);
    lv_obj_add_style(obj, &style_radio_chk, LV_PART_INDICATOR | LV_STATE_CHECKED);
}