lvgl-复选框学习篇(六)

lvgl-复选框学习篇(六)

学习材料/工具

• QT Creator 5.12.3

• lvgl 源代码

• lvgl 官方复选框例程

• 极客笔记

学习内容/过程

• 零件和样式

• 用法

  • 文本

  • 选中/取消选中

  • 禁用复选框

  • 获取/设置复选框状态

• 事件

• 按键

• 范例

  • 简单复选框

  • 圆角按钮复选框

简介

复选框(lv_cb) 对象是从Button背景构建的，Button背景还包含Button项目符号和Label，以实现经典的复选框。

零件和样式

该复选框的主要部分称为LV_CHECKBOX_PART_BG。它是"项目符号"及其旁边的文本的容器。背景使用所有经典的背景样式属性。

项目符号是真正的基础对象(lv_obj)，可以用LV_CHECKBOX_PART_BULLET应用。项目符号会自动继承背景状态。因此，背景被按下时，项目符号也会进入按下状态。项目符号还使用所有典型的背景样式属性。

标签没有专用部分。因为文本样式属性始终是继承的，所以可以在背景样式中设置其样式。

用法

• 文本

可以通过lv_checkbox_set_text(cb,“New text”)函数修改文本。它将动态分配文本。

要设置静态文本，请使用lv_checkbox_set_static_text(cb, txt)。这样，将仅存存储txt指针，并且在存在复选框时不应释放该指针。

• 选中/取消选中

可以通过lv_checkbox_set_checked(cb, true/false)手动选中/取消选中复选框。设置为true将选中该复选框，而设置为false将取消选中该复选框。

• 禁用复选框

要禁用复选框，调用lv_checkbox_set_disabled(cb,true);

• 获取/设置复选框状态

可以使用lv_checkbox_get_state(cb)函数获取CheckBox的当前状态，该函数返回当前状态。可以使用lv_checkbox_set_state(cb,state)设置复选框的当前状态。枚举lv_btn_state_t定义的可用状态为：

• LV_BTN_STATE_RELEASED

• LV_BTN_STATE_PRESSED

• LV_BTN_STATE_DISABLED

• LV_BTN_STATE_CHECKED_RELEASED

• LV_BTN_STATE_CHECKED_PRESSED

• LV_BTN_STATE_CHECKED_DISABLED

事件

除了通用事件，复选框还支持以下特殊事件：

• LV_EVENT_VALUE_CHANGED - 切换复选框时发送。

请注意，与通用输入设备相关的事件(如LV_EVENT_PRESSED)也以非活动状态发送。需要使用lv_cb_is_inactive(cb)检查状态，以忽略非活动复选框中的事件。

了解有关事件的更多内容。

按键

复选框可处理以下按键：

• LV_KEY_RIGHT/UP-如果启用了切换，则进入切换状态

• LV_KEY_LEFT/DOWN-如果启用了切换，则进入非切换状态

请注意，与往常一样，LV_KEY_ENTER的状态会转换LV_EVENT_PRESSED/PRESSING/RELEASED等。

了解有关按键的更多内容。

范例

1. 简单复选框

static void prvCheckBox_Event_Handler(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);

    lv_obj_t *pObj = lv_event_get_target(e);

    LV_UNUSED(pObj);

    if(code == LV_EVENT_VALUE_CHANGED)
    {
        const char *txt = lv_checkbox_get_text(pObj);

        const char *state = lv_obj_get_state(pObj) & LV_STATE_CHECKED ? "Checked" : "Unchecked";

        LV_UNUSED(txt);

        LV_UNUSED(state);

        LV_LOG_USER("%s: %s",txt,state);
    }
}

/**
 * @brief prvSimple
 */
static void prvSimple(void)
{
//    弹性布局-垂直排序(类似qt的垂直布局)
    lv_obj_set_flex_flow(lv_scr_act(), LV_FLEX_FLOW_COLUMN);

//    弹性布局对齐方式-简单居中(LV_FLEX_ALIGN_CENTER) 水平方向左上和垂直上方向上(LV_FLEX_ALIGN_START)
    lv_obj_set_flex_align(lv_scr_act(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START,LV_FLEX_ALIGN_CENTER);

    lv_obj_t *pSimpleChechbox;

//    创建复选框容器对象
    pSimpleChechbox = lv_checkbox_create(lv_scr_act());

//    复选框添加文本
    lv_checkbox_set_text(pSimpleChechbox,"Apple");

//    复选框添加全部事件
    lv_obj_add_event_cb(pSimpleChechbox, prvCheckBox_Event_Handler,LV_EVENT_ALL,NULL);

    pSimpleChechbox = lv_checkbox_create(lv_scr_act());

    lv_checkbox_set_text(pSimpleChechbox,"Banana");

//    复选框选中状态
    lv_obj_add_state(pSimpleChechbox, LV_STATE_CHECKED);

    lv_obj_add_event_cb(pSimpleChechbox,prvCheckBox_Event_Handler,LV_EVENT_ALL,NULL);

    pSimpleChechbox = lv_checkbox_create(lv_scr_act());

    lv_checkbox_set_text(pSimpleChechbox, "Lemon");

//    禁用复选框
    lv_obj_add_state(pSimpleChechbox, LV_STATE_DISABLED);

    lv_obj_add_event_cb(pSimpleChechbox,prvCheckBox_Event_Handler,LV_EVENT_ALL, NULL);

    pSimpleChechbox = lv_checkbox_create(lv_scr_act());

    lv_checkbox_set_text(pSimpleChechbox, "Melon\nand a new line");

//    选中并禁用复选框
    lv_obj_add_state(pSimpleChechbox, LV_STATE_CHECKED | LV_STATE_DISABLED);

    lv_obj_add_event_cb(pSimpleChechbox, prvCheckBox_Event_Handler,LV_EVENT_ALL,NULL);

//    更新复选框布局
    lv_obj_update_layout(pSimpleChechbox);

}

2. 圆角按钮的复选框

static lv_style_t prvStyleRadio_g;

static lv_style_t prvStyleRadioChk_g;

static uint32_t ulActive_index_1_g = 0;

static uint32_t ulActive_index_2_g = 0;

static void prvRadio_Event_Handler(lv_event_t *e)
{
//    获取数据
    uint32_t *pulActiveId = lv_event_get_user_data(e);

//    获取当前事件
    lv_obj_t *pCont = lv_event_get_current_target(e);

//    获取当前对象
    lv_obj_t *pActCheckBox = lv_event_get_target(e);

//    根据旧活动ID获取旧的复选框对象
    lv_obj_t *pOldCheckBox = lv_obj_get_child(pCont, *pulActiveId);

    /*Do nothing if the container was clicked*/
//    点击对象不变返回
    if(pActCheckBox == pCont) return ;

    /*Uncheck the previous radio button*/
    lv_obj_clear_state(pOldCheckBox,LV_STATE_CHECKED);

    /*Uncheck the current radio button*/
    lv_obj_add_state(pActCheckBox, LV_STATE_CHECKED);

//    获取活动对象的id
    *pulActiveId = lv_obj_get_index(pActCheckBox);

    LV_LOG_USER("Selected radio buttons: %d, %d", (int)ulActive_index_1_g, (int)ulActive_index_2_g);
}

static void prvRadioButton_Create(lv_obj_t *parent, const char *txt)
{
    lv_obj_t *pObj = lv_checkbox_create(parent);

    lv_checkbox_set_text(pObj, txt);

    lv_obj_add_flag(pObj,LV_OBJ_FLAG_EVENT_BUBBLE);

    lv_obj_add_style(pObj, &prvStyleRadio_g, LV_PART_INDICATOR);

    lv_obj_add_style(pObj, &prvStyleRadioChk_g, LV_PART_INDICATOR | LV_STATE_CHECKED);
}

static void prvRadioBtnCheckBox(void)
{
    lv_style_init(&prvStyleRadio_g);

    lv_style_set_radius(&prvStyleRadio_g,LV_RADIUS_CIRCLE);

    lv_style_init(&prvStyleRadioChk_g);

    lv_style_set_bg_img_src(&prvStyleRadioChk_g,NULL);

    uint32_t i;

    char buf[32];

    lv_obj_t *pCont1 = lv_obj_create(lv_scr_act());

    lv_obj_set_flex_flow(pCont1, LV_FLEX_FLOW_COLUMN);

    lv_obj_set_size(pCont1, lv_pct(40),lv_pct(80));

    lv_obj_add_event_cb(pCont1, prvRadio_Event_Handler, LV_EVENT_CLICKED, &ulActive_index_1_g);

    for (i = 0;i < 5;i++) {

        lv_snprintf(buf, sizeof (buf),"A %d",(int)i+1);

        prvRadioButton_Create(pCont1,buf);
    }

    lv_obj_add_state(lv_obj_get_child(pCont1,0),LV_STATE_CHECKED);

//    创建基础对象容器
    lv_obj_t *pCont2 = lv_obj_create(lv_scr_act());

//    垂直布局
    lv_obj_set_flex_flow(pCont2, LV_FLEX_FLOW_COLUMN);

    lv_obj_set_size(pCont2, lv_pct(40),lv_pct(80));

    lv_obj_set_x(pCont2,lv_pct(50));

    lv_obj_add_event_cb(pCont2,prvRadio_Event_Handler,LV_EVENT_CLICKED, &ulActive_index_2_g);

    for (i = 0;i < 3; i++) {

        lv_snprintf(buf, sizeof (buf), "B %d", (int)i+1);

        prvRadioButton_Create(pCont2,buf);
    }

    lv_obj_add_state(lv_obj_get_child(pCont2,0),LV_STATE_CHECKED);

}

学习结果

andler,LV_EVENT_CLICKED, &ulActive_index_2_g);

for (i = 0;i < 3; i++) {

    lv_snprintf(buf, sizeof (buf), "B %d", (int)i+1);

    prvRadioButton_Create(pCont2,buf);
}

lv_obj_add_state(lv_obj_get_child(pCont2,0),LV_STATE_CHECKED);

}

### 学习结果

通过本篇文章学习到如何去创建复选框以及复选框的API操作。