Struct ListItem

pub struct ListItem<Msg: Clone> {
    pub label: String,
    pub subtitle: Option<String>,
    pub trailing: Option<String>,
    pub on_press: Option<Msg>,
    pub id: Option<WidgetId>,
    pub selected: bool,
    pub icon: Option<(Arc<Vec<u8>>, u32, u32)>,
}

A row inside a list with a primary label and optional subtitle / trailing text.

Use to build settings menus, navigation lists, contact rows or any other vertically-stacked tappable content. The widget paints its own hover and pressed surfaces and a rounded focus ring; wrap a column of ListItems inside a scroll for scrollable lists.

// In view():
scroll(
    column()
        .push( list_item( "Wi-Fi" ).trailing( "Eduroam" ).on_press( Msg::OpenWifi ) )
        .push( list_item( "Bluetooth" ).subtitle( "AirPods Pro" ).on_press( Msg::OpenBluetooth ) )
        .push( list_item( "Display" ).trailing( "Light" ).on_press( Msg::OpenDisplay ) ),
)
.into()

Fields

label: String

Primary label (always visible, top-aligned when a subtitle is present).

subtitle: Option<String>

Optional secondary line drawn below the label in muted colour. Doubles the row height when set.

trailing: Option<String>

Optional right-aligned text (current setting, badge count, “›” disclosure). Drawn in muted colour.

on_press: Option<Msg>

Message emitted on tap. None keeps the item visible but inert.

id: Option<WidgetId>

Optional stable identifier for focus management.

selected: bool

true paints the row with the dark selected surface and white text, regardless of hover / press state. Use to indicate the active item in a list of choices (combo dropdown, settings group with a single active value).

icon: Option<(Arc<Vec<u8>>, u32, u32)>

Optional leading icon — RGBA bytes + native dimensions. The row reserves theme::ICON_SIZE + theme::ICON_GAP on the left when this is set, and offsets the label / subtitle by the same amount. Pass None to keep the icon-less layout.

Implementations

impl<Msg: Clone> ListItem<Msg>

pub fn new(label: impl Into<String>) -> Self

Create a list item with the given primary label, no subtitle, no trailing text and no callback.

pub fn icon(self, rgba: Arc<Vec<u8>>, w: u32, h: u32) -> Self

Attach a leading icon. Pass the decoded RGBA buffer alongside the image’s native width and height; the draw path scales it down to theme::ICON_SIZE on the same row baseline as the label. Symbolic icons should be pre-tinted by the caller (see crate::tint_symbolic).

pub fn selected(self, yes: bool) -> Self

Mark this row as the currently-selected option in its list. Selected rows paint with a dark surface and white text and override hover / press visuals.

pub fn subtitle(self, s: impl Into<String>) -> Self

Add a secondary line below the label. Doubles the row height to fit both lines comfortably.

pub fn trailing(self, s: impl Into<String>) -> Self

Add right-aligned text (settings value, badge, disclosure arrow).

pub fn on_press(self, msg: Msg) -> Self

Set the message emitted when the row is tapped.

pub fn id(self, id: WidgetId) -> Self

Assign a stable identifier for focus management.

pub fn preferred_size(&self, max_width: f32, _canvas: &Canvas) -> (f32, f32)

pub fn paint_bounds(&self, rect: Rect) -> Rect

Focus stroke is centered on rect, so half the stroke width plus ~1 px of antialiasing bleed sits outside.

pub fn draw( &self, canvas: &mut Canvas, rect: Rect, focused: bool, hovered: bool, pressed: bool, )

Trait Implementations

impl<Msg: Clone + 'static> From<ListItem<Msg>> for Element<Msg>

fn from(l: ListItem<Msg>) -> Self

Converts to this type from the input type.