How to set height of each option in a ddlist?

How-to
1

Description

how to set height of each option in a ddlist?

What MCU/Processor/Board and compiler are you using?

What do you want to achieve?

as the picture I uploaded, I want to set each option’s height of a ddlist same to the buttom matrix’s height, how to set the style?

What have you tried so far?

I try to set the the padding attributes of LV_DDLIST_STYLE_BG and LV_DDLIST_STYLE_SEL, but it doesn’t work.

Code to reproduce

The code block(s) should be formatted like:

static void chart_create(lv_obj_t * parent)
{
    static const char* btnm_map[] = {"CH A", "CH B", "CH C", ""};

    lv_obj_t* btnm = lv_btnm_create(parent, NULL);
    lv_btnm_set_map(btnm, btnm_map);
    lv_obj_set_size(btnm, 600, 60);
    lv_obj_align(btnm, NULL, LV_ALIGN_CENTER, 0, 0);

    /* ddlist */
    static lv_style_t style_ddlist_bg;
    lv_style_copy(&style_ddlist_bg, &lv_style_pretty);
    style_ddlist_bg.body.main_color = LV_COLOR_WHITE;
    style_ddlist_bg.body.grad_color = LV_COLOR_WHITE;

    static lv_style_t style_ddlist_sel;
    lv_style_copy(&style_ddlist_sel, &lv_style_plain_color);
    style_ddlist_sel.body.main_color = LV_COLOR_BLUE;
    style_ddlist_sel.body.grad_color = LV_COLOR_BLUE;
    style_ddlist_sel.text.color = LV_COLOR_BLACK;

    lv_obj_t* ddlist = lv_ddlist_create(parent, NULL);
    lv_ddlist_set_options(ddlist, "CH D\n""CH E\n""CH F\n""CH G");
    lv_ddlist_set_draw_arrow(ddlist, true);
    lv_ddlist_set_fix_width(ddlist, 200);
    lv_ddlist_set_fix_height(ddlist, 180);
    lv_ddlist_set_style(ddlist, LV_DDLIST_STYLE_BG, &style_ddlist_bg);
    lv_ddlist_set_style(ddlist, LV_DDLIST_STYLE_SEL, &style_ddlist_sel);

    lv_obj_align(ddlist, btnm, LV_ALIGN_OUT_RIGHT_TOP, 0, 0);
}

Screenshot and/or video

ddilist_option_height
ddilist_option_height.png1040×639 24.1 KB

2

https://docs.littlevgl.com/en/html/object-types/ddlist.html#_CPPv424lv_ddlist_set_fix_heightP8lv_obj_t10lv_coord_t

3

@zhangjiawei1992
You should adjust the following parameters of LV_DDLIST_STYLE_BG:

  • style.text.line_space = 20;
  • style_pretty.body.padding.top = 20;
  • style_pretty.body.padding.bottom = 20;

@TridentTD
lv_ddlist_set_fix_height sets a fix height when the list is opened.

1 Like
4

hi， is the solution suit for the button matrix height setting?

5

I am confuse with the button’s styles setting. I know there are 5 button’s styles: rel/pr/tgl_rel/tgl_pr/ina, how to achive the effect that if I clicked one button in a button matrix, the button clicked keeping the selected state, even I release the mouse, like this,

effect
effect.png1039×636 20.8 KB

how to set each style for this effect?

6

and my code is shown below:

static void chart_create(lv_obj_t * parent)
{
    static const char* btnm_map[] = {"CH A", "CH B", "CH C", ""};

    lv_obj_t* btnm = lv_btnm_create(parent, NULL);
    lv_btnm_set_one_toggle(btnm, true);
    lv_btnm_set_map(btnm, btnm_map);
    lv_obj_set_size(btnm, 600, 60);
    lv_obj_align(btnm, NULL, LV_ALIGN_CENTER, 0, 0);

    static lv_style_t style_btnm_bg;
    lv_style_copy(&style_btnm_bg, &lv_style_pretty);
    style_btnm_bg.body.padding.top = 0;
    style_btnm_bg.body.padding.bottom = 0;
    style_btnm_bg.body.padding.left = 0;
    style_btnm_bg.body.padding.right = 0;
    style_btnm_bg.body.padding.inner = 0;

    static lv_style_t style_btnm_rel;
    lv_style_copy(&style_btnm_rel, &lv_style_btn_rel);
    style_btnm_rel.body.radius = 0;
    style_btnm_rel.body.border.part = LV_BORDER_LEFT | LV_BORDER_LEFT;
    style_btnm_rel.body.border.width = 1;

    static lv_style_t style_btnm_pr;
    lv_style_copy(&style_btnm_pr, &lv_style_btn_pr);
    style_btnm_pr.body.radius = 0;
    style_btnm_pr.body.border.part = LV_BORDER_LEFT | LV_BORDER_LEFT;
    style_btnm_pr.body.border.width = 1;

    static lv_style_t style_btnm_tgl_rel;
    lv_style_copy(&style_btnm_tgl_rel, &lv_style_btn_tgl_rel);
    style_btnm_tgl_rel.body.radius = 0;
    style_btnm_tgl_rel.body.border.part = LV_BORDER_LEFT | LV_BORDER_LEFT;
    style_btnm_tgl_rel.body.border.width = 1;

    static lv_style_t style_btnm_tgl_pr;
    lv_style_copy(&style_btnm_tgl_pr, &lv_style_btn_tgl_pr);
    style_btnm_tgl_pr.body.radius = 0;
    style_btnm_tgl_pr.body.border.part = LV_BORDER_LEFT | LV_BORDER_LEFT;
    style_btnm_tgl_pr.body.border.width = 1;

    lv_btnm_set_style(btnm, LV_BTNM_STYLE_BG, &style_btnm_bg);
    lv_btnm_set_style(btnm, LV_BTNM_STYLE_BTN_REL, &style_btnm_rel);
    lv_btnm_set_style(btnm, LV_BTNM_STYLE_BTN_PR, &style_btnm_pr);
    lv_btnm_set_style(btnm, LV_BTNM_STYLE_BTN_TGL_REL, &style_btnm_tgl_rel);
    lv_btnm_set_style(btnm, LV_BTNM_STYLE_BTN_TGL_PR, &style_btnm_tgl_pr);
....
}
7 
lv_obj_t* ddlist = lv_ddlist_create(parent, NULL);
    lv_ddlist_set_options(ddlist, "CH D\n""CH E\n""CH F\n""CH G");
    lv_ddlist_set_align(ddlist, LV_LABEL_ALIGN_CENTER);
    lv_ddlist_set_draw_arrow(ddlist, true);
    lv_ddlist_set_fix_width(ddlist, 200);
//    lv_ddlist_set_fix_height(ddlist, 180);
    lv_ddlist_set_style(ddlist, LV_DDLIST_STYLE_BG, &style_ddlist_bg);
    lv_ddlist_set_style(ddlist, LV_DDLIST_STYLE_SEL, &style_ddlist_sel);

    lv_obj_align(ddlist, btnm, LV_ALIGN_OUT_RIGHT_MID, 0, -1);

I aligned the ddlist label, but it doesn’t work.

8

I try to solve my problems , and some problems are solved, but still some problems exsist.

Problem solved:
1、I know how to set the button matrix toggle state, for I should add the function

lv_btnm_set_btn_ctrl_all(btnm, LV_BTNM_CTRL_TGL_ENABLE);

to enable the toggle function.

Exist Problems:
1、I aligned the ddlist label, but it doesn’t work.

lv_obj_t* ddlist = lv_ddlist_create(parent, NULL);
    lv_ddlist_set_options(ddlist, "CH D\n""CH E\n""CH F\n""CH G");
    lv_ddlist_set_align(ddlist, LV_LABEL_ALIGN_CENTER);
    lv_ddlist_set_draw_arrow(ddlist, true);
    lv_ddlist_set_fix_width(ddlist, 200);
    lv_ddlist_set_style(ddlist, LV_DDLIST_STYLE_BG, &style_ddlist_bg);
    lv_ddlist_set_style(ddlist, LV_DDLIST_STYLE_SEL, &style_ddlist_sel);

    lv_obj_align(ddlist, btnm, LV_ALIGN_OUT_RIGHT_MID, 0, -1);

2、the solution of adjusting height of a ddlist is suitable for adjusting button matrix?

3、I have a demand that I need to create 2 event_cb for 2 object(button matrix and ddlist),
if I clicked the ddlist, I should turn off the toggle state of the button matrix(evnet_cb A).and if I clicked the ddlist, the ddlist is opened, now if I turn to click the button matrix, the ddlist shoud close(event_cb B). It seems some bugs in event_cb B, that if I set this event_cb, It has to clicked twice time if I want to open the ddlist. Below are 2 event_cb code:


static lv_obj_t* btnm;
static lv_obj_t* ddlist;

static void ddlist_event_cb(lv_obj_t* ddlist, lv_event_t event)
{
    uint16_t btn_id_pr = lv_btnm_get_active_btn(btnm);

    lv_btnm_clear_btn_ctrl(btnm, btn_id_pr, LV_BTNM_CTRL_TGL_STATE);

}

static void btnm_event_cb(lv_obj_t* btnm, lv_event_t event)
{
    //lv_ddlist_close(ddlist, LV_ANIM_OFF);

    lv_ddlist_ext_t* ext = (lv_ddlist_ext_t*)lv_obj_get_ext_attr(ddlist);

    if (ext->opened)
        lv_ddlist_close(ddlist, LV_ANIM_OFF);

}
9

For the 3rd problem, I add 2 line code to achieve what I want.

static void btnm_event_cb(lv_obj_t* btnm, lv_event_t event)
{
    if (event != LV_EVENT_PRESSED)
        return;
....
}
10

lv_btnm_set_one_toggle(btnm, true); keeps the last button toggled.

I’ve fixed it in dev-6.1 but if you move lv_ddlist_set_align after lv_ddlist_set_style is also works.

No, these are two different things. You can simply use lv_obj_set_height(btnm, 100) to set the buttons matrix’s height.