SectionRow

One row in a Section: icon, title and subtitle, with a value, extra items, a check mark, a switch or a chevron.

SectionRow is a row of a Section. It has an optional icon, a title and subtitle on the left, and a value, extra items, a check mark, a switch or a chevron on the right. A clickable row takes keyboard focus (Tab), shows a focus ring and activates with Enter or Space. A radio row also moves selection with Up and Down.

SectionRow is a FocusScope. It has three slots, all lists of items (since 1.4.0): leading (before the title; an avatar, a check box), content (replaces the title and subtitle column; a slider that spans the row) and trailing (the default property: a button, a combo box, a spin box).

Example

Section {
    SectionRow {
        title: qsTr("Notifications")
        subtitle: qsTr("Show a banner when an update is ready")
        showSwitch: true
        switchChecked: settings.notify
        onSwitchToggled: checked => settings.notify = checked
    }
    SectionRow {
        title: qsTr("Language")
        value: qsTr("English")
        chevron: true
        onClicked: languagePage.open()
    }
}

Properties

Name	Type	Default	Description
`animated`	`bool`	`true`	Turns the busy spinner; false draws a fixed arc (for screenshots).
`atlasRow`	`bool` (read-only)	—	Always true; marks the item as a row so the first one can skip its separator.
`busy`	`bool`	`false`	Shows a spinner in place of the value and chevron; the row stays enabled but does not activate.
`byMouse`	`bool`	`false`	True after a click, so the focus ring shows for keyboard focus only.
`checkmark`	`bool`	`false`	Shows an accent check mark; on a `radio` row it is the checked state.
`chevron`	`bool`	`false`	Shows a chevron at the trailing end and, unless `clickable` is set, makes the row clickable.
`clickable`	`bool`	`chevron`	Whether the row takes focus, shows hover and focus feedback and emits `clicked()`.
`content`	`list<Item>` (read-only)	—	Items that replace the title and subtitle column (a slider that spans the row); give them `Layout.fillWidth`.
`density`	`int`	`AtlasStyle.density`	`AtlasStyle.Normal` or `AtlasStyle.Compact`; Compact shrinks the height and vertical padding to about 75%.
`disclosure`	`bool`	`false`	Turns the chevron a quarter turn when `expanded` (for rows that open and close something).
`expanded`	`bool`	`false`	Whether a disclosure row is open.
`iconName`	`string`	`""`	A theme icon name shown before the title; ignored when `leading` has items.
`isFirst`	`bool` (read-only)	—	True for the first visible row in its `Section`, which draws no separator above itself.
`leading`	`list<Item>` (read-only)	—	Items before the title (an avatar, a check box); they replace the icon. Read-only list; add children by declaring them.
`mirrored`	`bool` (read-only)	—	True when the layout is mirrored (right-to-left).
`radio`	`bool`	`false`	Makes the row a radio button for screen readers; Up and Down move the selection to the neighbouring radio row.
`showSwitch`	`bool`	`false`	Shows an `AtlasSwitch` at the trailing end.
`subtitle`	`string`	`""`	A second, smaller line under the title.
`switchChecked`	`bool`	`false`	The state the switch shows. Bind it to the real setting: after `switchToggled` the switch goes back to this value.
`title`	`string`	`""`	The main text.
`trailing`	`list<Item>` (read-only)	—	The default property: items at the trailing end (a button, a combo box). They keep their own focus and Tab order after the row's.
`value`	`string`	`""`	Text at the trailing end, dimmed and elided; hidden while `busy`.

Signals

Name	Description
`clicked()`	Emitted when the row is clicked or activated with Enter or Space.
`switchToggled(bool checked)`	Emitted when the user flips the switch; `checked` is the requested state. Write it to the setting, the switch shows `switchChecked`.

Methods

Signature	Description
`activate(var event): var`	Handles Enter and Space: emits `clicked()` when the row itself has focus and is clickable. Called by the key handlers.
`ensureVisible(): var`	Scrolls the enclosing `Flickable` so the row is on screen.
`step(var forward, var event): var`	Moves focus and selection to the next (`forward`) or previous radio row; does nothing on a non-radio row.

Note

Items in trailing keep their own focus and Tab order after the row's, and a key they don't use doesn't activate the row. While busy the row stays enabled but does not activate.

Accessibility

A clickable row is a button for screen readers, a radio row a radio button and any other a list item. Its description is the subtitle and value, and "Busy" while busy. A switch row is exposed through its switch only, so the name is not read twice.