• FluentUI Reference Documentation
• FluentUI.Controls
• ListTile
• FluentUI 1.0

ListTile QML Type

A list item with leading and trailing content. More...

• List of all members, including inherited members

Properties

• container : Item
• font : font
• highlighted : bool
• leading : Component
• leftPadding : real
• rightPadding : real
• spacing : real
• text : string
• textColor : color
• trailing : Component

Signals

• void onClicked()

Detailed Description

ListTile provides a structured list item layout with a main text label, an optional leading component (such as an icon or avatar), and an optional trailing component (such as a button or badge). It supports highlight state, click interaction, and customizable padding and spacing.

Usage Example

 import QtQuick
 import FluentUI.Controls

 ListTile {
     text: "Settings"
     leading: Icon { source: "settings" }
     trailing: Icon { source: "chevron_right" }
     onClicked: console.log("Tapped")
 }

Property Documentation

container : Item

The internal container Item that holds the tile's content. Can be used for custom layout modifications.

font : font

The font used for the primary text.

highlighted : bool

Whether the tile is displayed in a highlighted visual state.

leading : Component

An optional Component displayed at the leading edge (left side in left-to-right layouts) of the tile.

leftPadding : real

The padding from the left edge of the tile to its content.

rightPadding : real

The padding from the right edge of the tile to its content.

spacing : real

The spacing between the leading content, text, and trailing content.

text : string

The primary text displayed in the list tile.

textColor : color

The color of the primary text.

trailing : Component

An optional Component displayed at the trailing edge (right side in left-to-right layouts) of the tile.

Signal Documentation

void onClicked()

Emitted when the list tile is clicked or tapped by the user.