How to create a simple checklist?

How-to
1

Description

I’m quite new to lvgl, so please excuse my rather basic question, but I’m really struggeling right now. For a flight simulator I want to create a checklist application. It should display a list of items, which can be marked as checked/done. I created the list of checkboxes with a label right next to it. That wasn’t a problem at all. However, I would like have a second column with the values to be checked. They should be aligned in a column with some spacing to the label of the checkbox.

Example:

[  ]  Battery Switch               ON
[  ]  POS Lights                   ON
[  ]  Fuel Pump                    ON
[  ]  Avionics                     OFF

How would you implemented this second column with the ON/OFF texts? In Qt5 there is a layout container called forms, which would work here. Unfortuanetly, I didn’t find anything similar in lvgl.

What LVGL version are you using?

v8 - latest

Many thanks in advance for your help!

2
  1. Create parent “Group” object as GRID layout with two columns. Then place Checkbox in first column with LV_GRID_FR() as width. label with ON/OFF in second column.
  2. Create parent “Group” object as Flex layout with LV_FLEX_FLOW_COLUMN flow. Place on it new “Group” object for each row with Flex layout and LV_FLEX_FLOW_ROW flow. And now place CheckBox and Label on it Group.