How to create Custom List

How-to
1

Description

Hi LVGL Team,
Is it possible to create custom list?

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

ARM

What LVGL version are you using?

V7.0+

What do you want to achieve?

I want to create list with slider, image and lable.
Please see the attached screen shot
i need label and slider should be in one item in list instead of using lv_list_add_btn(button)

What have you tried so far?

NA

Screenshot and/or video

IMG_20200813_155044
IMG_20200813_1550441824×4000 2.95 MB

Thanks in Advance

2

I created a custom horizontal scrolling list using page. works well for me so far, but it just contains images and labels, so I don’t know how well it would work if you need to add other controls. Probably not the only way to do this, or even the best way.

I use lv_obj_clean() to clear out items added to page. Not really tested to make sure I have no memory leaks yet.
I add some custom data to the area object for use later on as I was having trouble detecting the index position of an item within the page and it seemed the easiest way. If you need to do that you have to enable user data in objects. in lv_conf.h (LV_USE_USER_DATA)

This is what I did, although not the completed code, the code to add items was actually in a separate function.


   lv_obj_t *  page = lv_page_create(lv_scr_act(), NULL);
   lv_obj_set_pos(page, 10, 173);
   lv_obj_set_size(page, 780, 107);
   lv_obj_add_style(page, LV_PAGE_PART_BG, &gold_bg_style);

   lv_page_set_scrlbar_mode(page, LV_SCRLBAR_MODE_OFF );


   lv_page_set_scrollable_fit2(page, LV_FIT_TIGHT, LV_FIT_TIGHT);

   // add an area 
   lv_obj_t * area = lv_obj_create(page, NULL); 

   lv_obj_set_user_data(area, gz);

   lv_obj_set_size(area, 200, 90);
   lv_obj_add_style(area, LV_OBJ_PART_MAIN, &gold_bg_style);
  // i is an index, incremented eash time I add an object
   lv_obj_align(area, NULL, LV_ALIGN_IN_LEFT_MID, i*205, 0);

   // add stuff to area

   lv_obj_set_click(area, true);
   lv_obj_set_drag_parent(area, true);  // need this to scroll page properly
   lv_obj_set_event_cb(area, page_event_handler);
3

Add button makes the whole item row a button instead of adding a button to the content. Wouldn’t it be better to use a table and put the image in 1 column and the label and slider in the other.

Other than that you could use the grid style and put the label and slider next to an image and then wrap a for loop around it to set the object for each instance. That is pretty much what a widget does anyway. You will find the code for styling a grid in the example looking at the top buttons on the controls tab. Change the widgets to whatever you need and echo through an array containing your list items.

4

Thank you very much Benedict_Hewson

Your example worked for me :slight_smile:

I am using lv_obj_set_user_data it works for first time

On second time it’s not working.

For example for lv_obj_set_user_data I am sending parameter like “test-test1-test2”.

These value will print when I click on area right? This works only for 1st time on 2nd click it printing only “test”.

Could please help me with this issue? Why I am getting this full text for first time only.

Thanks in advance.