arch(list): deprecate and add a flex-column list example

Deprecate the lv_list widget. A list is just a flex container with a column flow,
so it can be built directly from lv_obj with a LV_FLEX_FLOW_COLUMN layout.

Following the deprecation guidelines:
- @deprecated Doxygen tags and LV_DEPRECATED on lv_list_create
- LV_LOG_DEPRECATED runtime warning in lv_list_create
- migration-v10.mdx entry pointing to the replacement
- the new lv_example_flex_list shows how to build one from base widgets

Live call sites in the kept examples, demos and tests are wrapped with
LV_DEPRECATIONS_IGNORE_BEGIN/END so the -Wdeprecated -Werror build stays clean.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Gabor Kiss-Vamosi
2026-08-03 10:30:58 +02:00
committed by André Costa
co-authored by Claude Opus 4.8
parent fbb5007d83
commit 06b37019b5
15 changed files with 295 additions and 0 deletions
@@ -10,6 +10,9 @@
#if LV_USE_DEMO_KEYPAD_AND_ENCODER
/*The demo shows the deprecated `lv_list` widget too.*/
LV_DEPRECATIONS_IGNORE_BEGIN
/*********************
* DEFINES
*********************/
@@ -214,4 +217,6 @@ static void ta_event_cb(lv_event_t * e)
}
}
LV_DEPRECATIONS_IGNORE_END
#endif
+6
View File
@@ -9,6 +9,10 @@
#include "lv_demo_stress.h"
#if LV_USE_DEMO_STRESS
/*The stressed widget set contains the deprecated `lv_list` and `lv_win` widgets.*/
LV_DEPRECATIONS_IGNORE_BEGIN
/*********************
* DEFINES
*********************/
@@ -457,4 +461,6 @@ static void arc_set_end_angle_anim(void * obj, int32_t v)
lv_arc_set_end_angle(obj, v);
}
LV_DEPRECATIONS_IGNORE_END
#endif /* LV_USE_DEMO_STRESS */
+8
View File
@@ -440,6 +440,14 @@ if you need finer control.
[`lv_example_menu_navigation`](widgets/menu#building-a-menu-without-lv_menu)
example for a starting point.
### lv_list
- The `lv_list` widget is deprecated. A list is just a flex container with a
column flow, so build one directly from `lv_obj` with a `LV_FLEX_FLOW_COLUMN`
layout instead. See the
[`lv_example_flex_list`](common-widget-features/layouts/flex#building-a-list)
example for a starting point.
---
## Drawing
@@ -164,6 +164,12 @@ If the base direction of the container is set the
The items on `ROW` layouts, and tracks of `COLUMN` layouts will be
placed from right to left.
## Building a list
<LvglExample name="lv_example_flex_list" path="layouts/flex/lv_example_flex_list" />
You can easily build a list using a column flex with 100% wide buttons and text.
## Forcing a New Track
<LvglExample name="lv_example_flex_new_track" path="layouts/flex/lv_example_flex_new_track" />
+8
View File
@@ -5,6 +5,14 @@ description: "A vertical container into which buttons and text rows can be added
## Overview
<Callout type="warning" title="Deprecated">
The `lv_list` widget is deprecated and kept only for backward compatibility. A
list is just a flex container with a column flow, so build one directly from
`lv_obj` with a `LV_FLEX_FLOW_COLUMN` layout instead. See the
[`lv_example_flex_list`](/common-widget-features/layouts/flex#building-a-list)
example for a starting point.
</Callout>
The List is a vertical container. You add full-width buttons and text rows
to it; the layout takes care of stacking them.
+1
View File
@@ -15,6 +15,7 @@ void lv_example_flex_flow(void);
void lv_example_flex_grow(void);
void lv_example_flex_ignore_layout(void);
void lv_example_flex_internal_padding(void);
void lv_example_flex_list(void);
void lv_example_flex_new_track(void);
void lv_example_flex_rtl(void);
@@ -0,0 +1,192 @@
/**
* @file lv_example_flex_list.c
*/
#include "../../lv_examples.h"
#if LV_USE_FLEX && LV_BUILD_EXAMPLES
/*A list is a flex column of full-width text rows and buttons. The static helpers
*below build and populate one on top of a plain flex container.
*
*The widgets are styled by hand to give the list its look: a flat background,
*full-width buttons with a grey bottom divider, and grey section headers.*/
static lv_obj_t * flex_list;
static lv_style_t style_list;
static lv_style_t style_header;
static lv_style_t style_button;
static lv_style_t style_button_pressed;
/**
* Set up the styles that give the list its look.
*
* The styles are static and stay attached to the widgets that use them, so they are
* initialized only once even if the example is created multiple times.
*/
static void styles_init(void)
{
static bool inited = false;
if(inited) return;
inited = true;
/*List background: flatten the base object's card into a tight, edge-clipped column.*/
lv_style_init(&style_list);
lv_style_set_pad_ver(&style_list, 0);
lv_style_set_pad_gap(&style_list, 0);
lv_style_set_clip_corner(&style_list, true);
/*Section header: a full-width grey bar with dark text. The transform makes the
*grey reach the list edges despite the list's horizontal padding.*/
lv_style_init(&style_header);
lv_style_set_bg_opa(&style_header, LV_OPA_COVER);
lv_style_set_bg_color(&style_header, lv_palette_lighten(LV_PALETTE_GREY, 2));
lv_style_set_text_color(&style_header, lv_palette_darken(LV_PALETTE_GREY, 4));
lv_style_set_transform_width(&style_header, 16);
/*List button: a flat white row with a grey bottom divider, overriding the
*default blue button look.*/
lv_style_init(&style_button);
lv_style_set_radius(&style_button, 0);
lv_style_set_shadow_width(&style_button, 0);
lv_style_set_bg_opa(&style_button, LV_OPA_COVER);
lv_style_set_bg_color(&style_button, lv_color_white());
lv_style_set_text_color(&style_button, lv_palette_darken(LV_PALETTE_GREY, 4));
lv_style_set_border_width(&style_button, 1);
lv_style_set_border_color(&style_button, lv_palette_lighten(LV_PALETTE_GREY, 2));
lv_style_set_border_side(&style_button, LV_BORDER_SIDE_BOTTOM);
lv_style_set_pad_all(&style_button, 8);
lv_style_set_pad_column(&style_button, 8);
/*Pressed feedback: a subtle dark recolor.*/
lv_style_init(&style_button_pressed);
lv_style_set_recolor(&style_button_pressed, lv_color_black());
lv_style_set_recolor_opa(&style_button_pressed, LV_OPA_20);
}
/**
* Create a list: a flex container that stacks its children in a column.
*/
static lv_obj_t * flex_list_create(lv_obj_t * parent)
{
lv_obj_t * list = lv_obj_create(parent);
lv_obj_set_flex_flow(list, LV_FLEX_FLOW_COLUMN);
lv_obj_add_style(list, &style_list, 0);
return list;
}
/**
* Add a full-width text row (a section header) to the list.
*/
static lv_obj_t * flex_list_add_text(lv_obj_t * list, const char * txt)
{
lv_obj_t * label = lv_label_create(list);
lv_obj_set_width(label, lv_pct(100));
lv_obj_add_style(label, &style_header, 0);
lv_label_set_text(label, txt);
return label;
}
/**
* Add a full-width button holding an optional icon and a scrolling text label.
*/
static lv_obj_t * flex_list_add_button(lv_obj_t * list, const void * icon, const char * txt)
{
lv_obj_t * btn = lv_button_create(list);
lv_obj_set_size(btn, lv_pct(100), LV_SIZE_CONTENT);
lv_obj_set_flex_flow(btn, LV_FLEX_FLOW_ROW);
lv_obj_add_style(btn, &style_button, 0);
lv_obj_add_style(btn, &style_button_pressed, LV_STATE_PRESSED);
#if LV_USE_IMAGE == 1
if(icon) {
lv_obj_t * img = lv_image_create(btn);
lv_image_set_src(img, icon);
}
#endif
if(txt) {
lv_obj_t * label = lv_label_create(btn);
lv_label_set_text(label, txt);
lv_label_set_long_mode(label, LV_LABEL_LONG_MODE_SCROLL_CIRCULAR);
lv_obj_set_flex_grow(label, 1);
}
return btn;
}
/**
* Find the text of a list button by looking for its child label.
*/
static const char * flex_list_get_button_text(lv_obj_t * btn)
{
uint32_t i;
for(i = 0; i < lv_obj_get_child_count(btn); i++) {
lv_obj_t * child = lv_obj_get_child(btn, i);
if(lv_obj_check_type(child, &lv_label_class)) {
return lv_label_get_text(child);
}
}
return "";
}
static void event_handler(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * obj = lv_event_get_target_obj(e);
if(code == LV_EVENT_CLICKED) {
LV_LOG_USER("Clicked: %s", flex_list_get_button_text(obj));
}
}
/**
* @title List built from a flex container
* @brief Build a list from a plain flex column.
*
* A column-flow flex container stacks full-width text headers and buttons. The
* static `flex_list_*` helpers wrap the few flex calls needed:
* `LV_FLEX_FLOW_COLUMN` for the list, full-width rows for the items, and
* `lv_obj_set_flex_grow` so each button's label fills the row next to its icon. The
* list look is produced with styles applied by hand.
*/
void lv_example_flex_list(void)
{
styles_init();
/*Create a list from a flex column*/
flex_list = flex_list_create(lv_screen_active());
lv_obj_set_size(flex_list, 180, 220);
lv_obj_center(flex_list);
/*Add buttons to the list*/
lv_obj_t * btn;
flex_list_add_text(flex_list, "File");
btn = flex_list_add_button(flex_list, LV_SYMBOL_FILE, "New");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
btn = flex_list_add_button(flex_list, LV_SYMBOL_DIRECTORY, "Open");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
btn = flex_list_add_button(flex_list, LV_SYMBOL_SAVE, "Save");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
btn = flex_list_add_button(flex_list, LV_SYMBOL_CLOSE, "Delete");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
btn = flex_list_add_button(flex_list, LV_SYMBOL_EDIT, "Edit");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
flex_list_add_text(flex_list, "Connectivity");
btn = flex_list_add_button(flex_list, LV_SYMBOL_BLUETOOTH, "Bluetooth");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
btn = flex_list_add_button(flex_list, LV_SYMBOL_GPS, "Navigation");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
btn = flex_list_add_button(flex_list, LV_SYMBOL_USB, "USB");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
btn = flex_list_add_button(flex_list, LV_SYMBOL_BATTERY_FULL, "Battery");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
flex_list_add_text(flex_list, "Exit");
btn = flex_list_add_button(flex_list, LV_SYMBOL_OK, "Apply");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
btn = flex_list_add_button(flex_list, LV_SYMBOL_CLOSE, "Close");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
}
#endif
@@ -1,6 +1,9 @@
#include "../../lv_examples.h"
#if LV_USE_GRIDNAV && LV_USE_LIST && LV_BUILD_EXAMPLES
/*The navigated content is built from the deprecated `lv_list` widget.*/
LV_DEPRECATIONS_IGNORE_BEGIN
/**
* @title Keypad navigation across two lists
* @brief Side-by-side list widgets with distinct `lv_gridnav_ctrl_t` modes.
@@ -47,4 +50,6 @@ void lv_example_gridnav_2(void)
}
}
LV_DEPRECATIONS_IGNORE_END
#endif
@@ -1,6 +1,9 @@
#include "../../lv_examples.h"
#if LV_USE_GRIDNAV && LV_USE_FLEX && LV_BUILD_EXAMPLES
/*The navigated content is built from the deprecated `lv_list` widget.*/
LV_DEPRECATIONS_IGNORE_BEGIN
static void event_handler(lv_event_t * e)
{
lv_obj_t * obj = lv_event_get_target_obj(e);
@@ -52,4 +55,6 @@ void lv_example_gridnav_4(void)
lv_label_set_text(label, "Button");
}
LV_DEPRECATIONS_IGNORE_END
#endif
@@ -1,6 +1,9 @@
#include "../../lv_examples.h"
#if LV_USE_LIST && LV_BUILD_EXAMPLES
/*This example shows the deprecated `lv_list` widget on purpose.*/
LV_DEPRECATIONS_IGNORE_BEGIN
static lv_obj_t * list1;
static lv_obj_t * list2;
@@ -174,4 +177,6 @@ void lv_example_list_reorder(void)
lv_group_remove_obj(btn);
}
LV_DEPRECATIONS_IGNORE_END
#endif
@@ -1,5 +1,9 @@
#include "../../lv_examples.h"
#if LV_USE_LIST && LV_BUILD_EXAMPLES
/*This example shows the deprecated `lv_list` widget on purpose.*/
LV_DEPRECATIONS_IGNORE_BEGIN
static lv_obj_t * list1;
static void event_handler(lv_event_t * e)
@@ -60,4 +64,6 @@ void lv_example_list_sections(void)
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
}
LV_DEPRECATIONS_IGNORE_END
#endif
@@ -1,6 +1,9 @@
#include "../../lv_examples.h"
#if LV_USE_TILEVIEW && LV_BUILD_EXAMPLES
/*The tile content is built from the deprecated `lv_list` widget.*/
LV_DEPRECATIONS_IGNORE_BEGIN
/**
* @title L-shaped tile view with scroll chaining
* @brief Three tiles in an L layout where a ten-item list chains its scroll to the tile view.
@@ -52,4 +55,6 @@ void lv_example_tileview_l_shape(void)
}
LV_DEPRECATIONS_IGNORE_END
#endif
+25
View File
@@ -21,6 +21,15 @@ extern "C" {
#error "lv_list: lv_flex is required. Enable it in lv_conf.h (LV_USE_FLEX 1)"
#endif
/**
* @deprecated The `lv_list` widget is deprecated and kept only for backward
* compatibility. A list is just a flex container with a column flow, so build
* one directly from `lv_obj` + a `LV_FLEX_FLOW_COLUMN` layout instead. See the
* `lv_example_flex_list` example for a starting point.
*/
#define LV_LIST_DEPRECATED_MSG \
"lv_list is deprecated; build a list from a flex column instead. See the lv_example_flex_list example."
/*********************
* DEFINES
*********************/
@@ -40,7 +49,9 @@ LV_ATTRIBUTE_EXTERN_DATA extern const lv_obj_class_t lv_list_button_class;
* Create a list object
* @param parent pointer to an object, it will be the parent of the new list
* @return pointer to the created list
* @deprecated Use a flex container with `LV_FLEX_FLOW_COLUMN` instead. See `lv_example_flex_list`.
*/
LV_DEPRECATED(LV_LIST_DEPRECATED_MSG)
lv_obj_t * lv_list_create(lv_obj_t * parent);
/**
@@ -48,7 +59,9 @@ lv_obj_t * lv_list_create(lv_obj_t * parent);
* @param list pointer to a list, it will be the parent of the new label
* @param txt text of the new label
* @return pointer to the created label
* @deprecated Add a full-width `lv_label` to a flex container instead. See `lv_example_flex_list`.
*/
LV_DEPRECATED(LV_LIST_DEPRECATED_MSG)
lv_obj_t * lv_list_add_text(lv_obj_t * list, const char * txt);
/**
@@ -57,7 +70,9 @@ lv_obj_t * lv_list_add_text(lv_obj_t * list, const char * txt);
* @param icon icon for the button, when NULL it will have no icon
* @param txt text of the new button, when NULL no text will be added
* @return pointer to the created button
* @deprecated Add a full-width `lv_button` to a flex container instead. See `lv_example_flex_list`.
*/
LV_DEPRECATED(LV_LIST_DEPRECATED_MSG)
lv_obj_t * lv_list_add_button(lv_obj_t * list, const void * icon, const char * txt);
/**
@@ -65,7 +80,9 @@ lv_obj_t * lv_list_add_button(lv_obj_t * list, const void * icon, const char * t
* @param list pointer to a list
* @param btn pointer to the button
* @return text of btn, if btn doesn't have text "" will be returned
* @deprecated The `lv_list` widget is deprecated. See `lv_example_flex_list`.
*/
LV_DEPRECATED(LV_LIST_DEPRECATED_MSG)
const char * lv_list_get_button_text(lv_obj_t * list, lv_obj_t * btn);
/**
@@ -73,7 +90,9 @@ const char * lv_list_get_button_text(lv_obj_t * list, lv_obj_t * btn);
* @param list pointer to a list
* @param btn pointer to the button
* @param txt pointer to the text
* @deprecated The `lv_list` widget is deprecated. See `lv_example_flex_list`.
*/
LV_DEPRECATED(LV_LIST_DEPRECATED_MSG)
void lv_list_set_button_text(lv_obj_t * list, lv_obj_t * btn, const char * txt);
#if LV_USE_TRANSLATION
@@ -83,7 +102,9 @@ void lv_list_set_button_text(lv_obj_t * list, lv_obj_t * btn, const char * txt);
* @param list pointer to a list, it will be the parent of the new label
* @param tag translation tag of the new label
* @return pointer to the created label
* @deprecated The `lv_list` widget is deprecated. See `lv_example_flex_list`.
*/
LV_DEPRECATED(LV_LIST_DEPRECATED_MSG)
lv_obj_t * lv_list_add_translation_tag(lv_obj_t * list, const char * tag);
/**
@@ -92,7 +113,9 @@ lv_obj_t * lv_list_add_translation_tag(lv_obj_t * list, const char * tag);
* @param icon icon for the button, when NULL it will have no icon
* @param tag translation tag of the new button, when NULL no translation tag will be added
* @return pointer to the created button
* @deprecated The `lv_list` widget is deprecated. See `lv_example_flex_list`.
*/
LV_DEPRECATED(LV_LIST_DEPRECATED_MSG)
lv_obj_t * lv_list_add_button_translation_tag(lv_obj_t * list, const void * icon, const char * tag);
/**
@@ -100,7 +123,9 @@ lv_obj_t * lv_list_add_button_translation_tag(lv_obj_t * list, const void * icon
* @param list pointer to a list
* @param btn pointer to the button
* @param tag pointer to the translation tag
* @deprecated The `lv_list` widget is deprecated. See `lv_example_flex_list`.
*/
LV_DEPRECATED(LV_LIST_DEPRECATED_MSG)
void lv_list_set_button_translation_tag(lv_obj_t * list, lv_obj_t * btn, const char * tag);
#endif
+13
View File
@@ -14,6 +14,9 @@
#include "../../core/lv_obj_class_private.h"
/*The `lv_list` API is deprecated as a whole and its functions call each other.*/
LV_DEPRECATIONS_IGNORE_BEGIN
/*********************
* DEFINES
*********************/
@@ -63,6 +66,7 @@ const lv_obj_class_t lv_list_text_class = {
lv_obj_t * lv_list_create(lv_obj_t * parent)
{
LV_LOG_DEPRECATED(LV_LIST_DEPRECATED_MSG);
LV_LOG_INFO("begin");
lv_obj_t * obj = lv_obj_class_create_obj(MY_CLASS, parent);
lv_obj_class_init_obj(obj);
@@ -72,6 +76,7 @@ lv_obj_t * lv_list_create(lv_obj_t * parent)
lv_obj_t * lv_list_add_text(lv_obj_t * list, const char * txt)
{
LV_LOG_DEPRECATED(LV_LIST_DEPRECATED_MSG);
LV_LOG_INFO("begin");
lv_obj_t * obj = lv_obj_class_create_obj(MY_CLASS_TEXT, list);
@@ -82,6 +87,7 @@ lv_obj_t * lv_list_add_text(lv_obj_t * list, const char * txt)
lv_obj_t * lv_list_add_button(lv_obj_t * list, const void * icon, const char * txt)
{
LV_LOG_DEPRECATED(LV_LIST_DEPRECATED_MSG);
LV_LOG_INFO("begin");
lv_obj_t * obj = lv_obj_class_create_obj(MY_CLASS_BUTTON, list);
lv_obj_class_init_obj(obj);
@@ -106,6 +112,7 @@ lv_obj_t * lv_list_add_button(lv_obj_t * list, const void * icon, const char * t
const char * lv_list_get_button_text(lv_obj_t * list, lv_obj_t * btn)
{
LV_LOG_DEPRECATED(LV_LIST_DEPRECATED_MSG);
LV_UNUSED(list);
uint32_t i;
for(i = 0; i < lv_obj_get_child_count(btn); i++) {
@@ -121,6 +128,7 @@ const char * lv_list_get_button_text(lv_obj_t * list, lv_obj_t * btn)
void lv_list_set_button_text(lv_obj_t * list, lv_obj_t * btn, const char * txt)
{
LV_LOG_DEPRECATED(LV_LIST_DEPRECATED_MSG);
LV_UNUSED(list);
uint32_t i;
for(i = 0; i < lv_obj_get_child_count(btn); i++) {
@@ -136,6 +144,7 @@ void lv_list_set_button_text(lv_obj_t * list, lv_obj_t * btn, const char * txt)
lv_obj_t * lv_list_add_translation_tag(lv_obj_t * list, const char * tag)
{
LV_LOG_DEPRECATED(LV_LIST_DEPRECATED_MSG);
LV_LOG_INFO("begin");
lv_obj_t * obj = lv_list_add_text(list, NULL);
@@ -145,6 +154,7 @@ lv_obj_t * lv_list_add_translation_tag(lv_obj_t * list, const char * tag)
lv_obj_t * lv_list_add_button_translation_tag(lv_obj_t * list, const void * icon, const char * tag)
{
LV_LOG_DEPRECATED(LV_LIST_DEPRECATED_MSG);
LV_LOG_INFO("begin");
lv_obj_t * obj = lv_list_add_button(list, icon, "");
@@ -155,6 +165,7 @@ lv_obj_t * lv_list_add_button_translation_tag(lv_obj_t * list, const void * icon
void lv_list_set_button_translation_tag(lv_obj_t * list, lv_obj_t * btn, const char * tag)
{
LV_LOG_DEPRECATED(LV_LIST_DEPRECATED_MSG);
LV_UNUSED(list);
uint32_t i;
for(i = 0; i < lv_obj_get_child_count(btn); i++) {
@@ -172,4 +183,6 @@ void lv_list_set_button_translation_tag(lv_obj_t * list, lv_obj_t * btn, const c
* STATIC FUNCTIONS
**********************/
LV_DEPRECATIONS_IGNORE_END
#endif /*LV_USE_LIST*/
+5
View File
@@ -4,6 +4,9 @@
#include "unity/unity.h"
/* These tests exercise the deprecated lv_list widget on purpose. */
LV_DEPRECATIONS_IGNORE_BEGIN
static lv_obj_t * list;
void setUp(void)
@@ -120,4 +123,6 @@ void test_list_translation_tag(void)
}
LV_DEPRECATIONS_IGNORE_END
#endif