Change style of text in a list

How-to
1

I have a list and I’m adding a bunch of text lines using lv_list_add_text. I’m able to change the background of the list to any color, but no matter what I do I can’t seem to change the appearance of the labels in the list.

I have tried setting every style item, on every element and every state on the list and it does nothing.

I also tried to save pointer to the label returned by lv_list_add_text and use that to add a style, but this has no effect either.

How to change the background color and text color of list items?

And how to make the border, scrollbar and the rest of those things invisible?

There is nothing in the docs about that.

2

Hi

This is one way:

  lv_obj_t * _text = NULL;
  lv_obj_t * _list = lv_list_create(lv_screen_active());
  lv_obj_center(_list);
  lv_obj_set_size(_list, 200, 300);

  _text = lv_list_add_text(_list, "Test1");
  lv_obj_set_style_text_color(_text, lv_color_hex(0xFF0000), LV_PART_MAIN | LV_STATE_DEFAULT);
  lv_obj_set_style_bg_color(_text, lv_color_hex(0x00FF00), LV_PART_MAIN | LV_STATE_DEFAULT);
  _text = lv_list_add_text(_list, "Test2");
  lv_obj_set_style_text_color(_text, lv_color_hex(0x000000), LV_PART_MAIN | LV_STATE_DEFAULT);
  lv_obj_set_style_bg_color(_text, lv_color_hex(0x00FFFF), LV_PART_MAIN | LV_STATE_DEFAULT);
  _text = lv_list_add_text(_list, "Test3");
  lv_obj_set_style_text_color(_text, lv_color_hex(0xFF00FF), LV_PART_MAIN | LV_STATE_DEFAULT);
  lv_obj_set_style_bg_color(_text, lv_color_hex(0xFFFF00), LV_PART_MAIN | LV_STATE_DEFAULT);

Will generate something like this:
image

3

This did indeed work, however i could swear that i was trying that bafore and it had no effect.

But i noticed something weird:
doing exactly what you suggested works, however if I try do do it via a style, it doesn’t;

so this works

  temp = lv_list_add_text(screenDebugList, "Some text");
  lv_obj_set_style_text_color(temp, lv_color_white(), LV_PART_MAIN | LV_STATE_DEFAULT);
  lv_obj_set_style_bg_color(temp, lv_color_black(), LV_PART_MAIN | LV_STATE_DEFAULT);

but this does not

  lv_style_t listItemStyle;
  lv_style_init(&listItemStyle);
  lv_style_set_text_color(&listItemStyle, lv_color_white());
  lv_style_set_bg_color(&listItemStyle, lv_color_black());

  temp = lv_list_add_text(screenDebugList, "Some text");
  lv_obj_add_style(temp, &listItemStyle, LV_PART_MAIN | LV_STATE_DEFAULT);

I though thosew things use the same mechanics? Why would adding a style to a label not work when it’s in a list?

Also a follow-up: how do i change (or rather make invisible) the border around the list?

4

Would say that either of these two should work:

lv_obj_set_style_border_width(_list, 0, LV_PART_MAIN | LV_STATE_DEFAULT);

lv_obj_set_style_border_opa(_list, LV_OPA_TRANSP, LV_PART_MAIN | LV_STATE_DEFAULT);

Would go with the setting for width otherwise I think the border will act as a margin/ padding for the elements inside the list…

5

Thanks, it does.

But how about adding a style to a label not working? (i think I edited the post when you were replying). I thought _add_style and _set_style_xxx basically affects the same stuff underneath?

6

try, making the “new style” static in order not to be a temporary variable, the styles need to be “global” variable, cannot be temporary variables in function stack…

  static lv_style_t listItemStyle;
  lv_style_init(&listItemStyle);
  lv_style_set_text_color(&listItemStyle, lv_color_white());
  lv_style_set_bg_color(&listItemStyle, lv_color_black());

  temp = lv_list_add_text(screenDebugList, "Some text");
  lv_obj_add_style(temp, &listItemStyle, LV_PART_MAIN | LV_STATE_DEFAULT);