How can I create a scrollable list where the user can drag to scroll and tap to select?

Henry · February 5, 2024, 10:54pm

What do you want to achieve?

I would like to show a long, scrollable list on my UI. For example, a list of files. The user should be able to drag to scroll through the list, then tap an item to select it. The selection would then be highlighted. I have run, edit, and delete buttons on my UI that could then act on the selection.

What have you tried so far?

I tried using a text area, but I can’t seem to get rid of the cursor, and I’m not sure how I would highlight the selection.

I tried using a roller. This could achieve what I’m looking for, but the style is awkward for something like a file list.

I can just paginate the list and have the user use arrow buttons to navigate, but that looks clunky and dated.

Others

SquareLine Studio version: 1.3.4
Operating system: Windows 10
Target hardware: Custom STM32 Board

Hermit · February 6, 2024, 2:20pm

A possible solution (screenshot added):
-Create a panel/container (make sure its scrollable flag is set and have Flex layout is set in inspector panel)
-Create component with different background-color for CHECKED state.
-From your code create components dynamically for every file-list element in the above-mentioned panel/container. (You’ll be able to do multi-selection with this solution.)
-The save/delete/etc. button should have a CALL_FUNCTION action on CLICKED event in which you perform the wished operations on the selected files. (you need to get the ‘CHECKED’ state of each element with LVGL code in this function to determine if you want to perform the file operation or not for that file.)