Row list

A column of list rows that is one stop for Tab and owns the selection and the keyboard, so the rows only have to draw themselves.

Use it for any list people scan by name and pick from: files, songs, downloads. Fill it with list rows. For pictures, use a picture grid. For a few choices that change a setting, use a menu.

Anatomy

A row list draws almost nothing itself. It keeps the selection, the place of the keyboard and the scrolling, and tells each row what to show.

1. HeadingA section heading, from the list's section property when rows fall into groups (a day, a folder).
2. SelectionRows that are selected next to each other are one wash, round only at its two ends.
3. RowEach row is the app's delegate, a list row, bound to the list.
4. Keyboard placeThe ring shows which row the keys act on.

States

The list has a selection and a place for the keyboard. They are separate: Ctrl with the arrow keys moves the place without changing the selection.

1. Nothing selectedNo wash anywhere. The first arrow key selects a row.
2. One selectedThe row's selected wash.
3. A run selectedOne wash across the run (Shift with the arrows, Shift-click, Ctrl+A).
4. Keyboard elsewhereThe selection stays where it was, and the ring stands on the row the keys will act on next.

Sizes

Keys and pointer

The list is one stop for Tab. Inside it the keyboard moves between rows.

The scroll wheel and the touchpad move the list as everywhere in Tacit: the touchpad follows the fingers and glides on after a flick.

Accessibility

• The list has the role of a list, named by label; set it to what the list holds ("Downloads"). Each row is a list item named by its name and the name beside it, and says whether it is selected.
• The list is one Tab stop, so a long list never costs a screen reader or keyboard user a press per row.
• Everything the pointer does in a list has a key: select, extend, toggle, open, look, menu and jump to a name.
• Selection is shown by the wash and the keyboard place by the ring, never by colour of the words alone.

Writing

The list shows what the app gives it, so the work is in the names. Use the file's or song's own name. The section headings say what the run is: "Today", "This week", the folder or artist. Type-to-jump matches the start of the name, so keep names starting with the word people know them by.

Do and don't

Code

A row list needs a model and a delegate. The delegate binds to the list, and the list does the rest.

import Tacit.Kit

SectionHeading { text: "Today" }
RowList {
    id: list
    width: 640; height: 400
    model: files                           // items have a `name`, for type-to-jump
    delegate: ListRow {
        required property var modelData
        required property int index
        width: list.rowWidth
        focusable: false                   // the list is the one tab stop
        glyph: modelData.kind
        name: modelData.name
        facts: [modelData.size, modelData.when]
        selected: list.isSelected(index)
        joinAbove: list.isSelected(index - 1)
        joinBelow: list.isSelected(index + 1)
        ring: list.ringAt(index)
        onClicked: m => list.clickAt(index, m)
        onActivated: list.activated(index)
    }
    onActivated: i => open(files[i])       // Enter, double-click
    onPeeked: i => panel.show(files[i])    // Space
}

Experimental, in Tacit.Kit 0.1. Changed 25 October 2026: first version.

Text and figures: CC BY 4.0. Tacit.Kit: LGPL-3.0 code, OFL fonts. The Tacit name.