How to set a fixed size for the button object in the list

Description

I want to set the width and height of the button objects in the list, but the displayed width and height are different from what I actually set.

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

vs2015

What LVGL version are you using?

v7.2

What have you tried so far?

If a button is selected, the button size seems to be the same as the set size, but by default, the button size is not enough, mainly because the width is not enough.

Code to reproduce

#include "list_test.h"
#include "lvgl/lvgl.h"
#include <stdio.h>

lv_obj_t* m_pAlarmInfoList;
lv_obj_t* pCont;
lv_color_t color;

LV_IMG_DECLARE(img_alarm_info_with_alpha)
#define MENU_OPTION_PARENT_CONT_WIDTH 410
#define MENU_OPTION_PARENT_CONT_HEIGHT 260

void addElement()
{
	lv_obj_t* pObj = lv_list_add_btn(m_pAlarmInfoList, NULL, NULL);
	if (NULL == pObj)
	{
		return;
	}
	lv_obj_set_size(pObj, 370, 73);
	lv_obj_set_style_local_border_color(pObj, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, color);
	lv_obj_set_style_local_border_color(pObj, LV_BTN_PART_MAIN, LV_STATE_FOCUSED, color);
	lv_obj_set_style_local_border_side(pObj, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_BORDER_SIDE_FULL);
	lv_obj_set_style_local_border_width(pObj, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 1);
	lv_obj_set_style_local_border_width(pObj, LV_BTN_PART_MAIN, LV_STATE_FOCUSED, 3);
	lv_obj_set_style_local_outline_opa(pObj, LV_BTN_PART_MAIN, LV_STATE_FOCUSED, LV_OPA_0);
	lv_obj_set_style_local_bg_opa(pObj, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_0);
	lv_obj_set_style_local_text_color(pObj, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, color);

	lv_btn_set_layout(pObj, LV_LAYOUT_OFF);

	lv_obj_t* pAlarmImg = lv_img_create(pObj, NULL);
	lv_img_set_src(pAlarmImg, &img_alarm_info_with_alpha);
	lv_obj_set_style_local_image_recolor_opa(pAlarmImg, LV_IMG_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_100);
	lv_obj_set_style_local_image_recolor(pAlarmImg, LV_IMG_PART_MAIN, LV_STATE_DEFAULT, color);
	lv_obj_align(pAlarmImg, pObj, LV_ALIGN_IN_LEFT_MID, 40, 0);

	lv_obj_t* pAlarmInfo = lv_label_create(pObj, NULL);
	lv_obj_set_style_local_text_font(pAlarmInfo, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &lv_font_montserrat_22);
	static int index = 0;
	char text[256] = { 0 };
	sprintf(text, "%d.XXXXXXXXXX", index++);
	lv_label_set_text(pAlarmInfo, text);
	lv_obj_align(pAlarmInfo, pObj, LV_ALIGN_IN_LEFT_MID, 94, 10);


	lv_obj_t* pPreBtn = lv_list_get_prev_btn(m_pAlarmInfoList, pObj);
	if (NULL != pPreBtn)
	{
		lv_obj_set_pos(pObj, 0, lv_obj_get_y(pPreBtn) + 88);
	}
	else
	{
		lv_obj_set_pos(pObj, 0, 0);
		lv_list_focus_btn(m_pAlarmInfoList, pObj);
	}
}


void list_test()
{
	color = LV_COLOR_YELLOW;
	lv_obj_set_style_local_bg_color(lv_scr_act(), LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_BLACK);
	pCont = lv_cont_create(lv_scr_act(), NULL);
	lv_obj_set_style_local_radius(pCont, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 8);
	lv_obj_set_style_local_border_opa(pCont, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_0);
	lv_obj_set_style_local_bg_opa(pCont, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_10);
	lv_obj_set_size(pCont, MENU_OPTION_PARENT_CONT_WIDTH, MENU_OPTION_PARENT_CONT_HEIGHT);
	lv_obj_align(pCont, lv_scr_act(), LV_ALIGN_IN_TOP_MID, 0, 85);

	m_pAlarmInfoList = lv_list_create(pCont, NULL);
	lv_obj_set_size(m_pAlarmInfoList, lv_obj_get_width(pCont), lv_obj_get_height(pCont) - 34);
	lv_obj_align(m_pAlarmInfoList, pCont, LV_ALIGN_IN_TOP_MID, 0, 20);
	lv_list_set_scroll_propagation(m_pAlarmInfoList, true);

	lv_list_set_scrollbar_mode(m_pAlarmInfoList, LV_SCROLLBAR_MODE_AUTO);
	lv_obj_set_style_local_radius(m_pAlarmInfoList, LV_LIST_PART_BG, LV_STATE_DEFAULT, 0);
	lv_obj_set_style_local_border_opa(m_pAlarmInfoList, LV_LIST_PART_BG, LV_STATE_DEFAULT, LV_OPA_0);
	lv_obj_set_style_local_bg_opa(m_pAlarmInfoList, LV_LIST_PART_BG, LV_STATE_DEFAULT, LV_OPA_0);
	lv_obj_set_style_local_pad_left(m_pAlarmInfoList, LV_LIST_PART_BG, LV_STATE_DEFAULT, 20);
	lv_obj_set_style_local_pad_right(m_pAlarmInfoList, LV_LIST_PART_SCROLLBAR, LV_STATE_DEFAULT, 10);
	lv_list_set_layout(m_pAlarmInfoList, LV_LAYOUT_OFF);


	addElement();
	addElement();
	addElement();
	addElement();
	addElement();
	addElement();
}

Screenshot and/or video


I hope the default size is the same as the size when the mouse is pressing.

Hi,

It’s because lv_list_add_btn makes the button to set its size to the parent’s width (minus the parents padding) Therefore you can’t set its size manually.

Do you use the “material” theme by default? If so it adds a width transition to the buttons when they are clicked. You can either

  1. use the “empty theme” and your own styles
  2. remove the style of the button with lv_obj_reset_style_list
  3. set these transition properties to 0

Thank you very much, let me find out how to use it.