Прокручиваемые страницы и списки

Прокручиваемые страницы полезны в сочетании с вертикальными компонентами или динамическими компонентами, такими как списки.

Kirigami.ScrollablePage

Kirigami.ScrollablePage — страница, содержащая прокручиваемое содержимое, например ListView. Прокрутка и индикаторы прокрутки управляются автоматически.

Kirigami.ScrollablePage {
    id: root
    //Прямоугольник автоматически станет прокручиваемым
    Rectangle {
        width: root.width
        height: 99999
    }
}

Во всём остальном прокручиваемая страница ничем не отличается от обычной.

Предупреждение

Не помещайте ScrollView внутрь Kirigami.ScrollablePage: дочерние элементы Kirigami.ScrollablePage уже находятся внутри ScrollView.

ListView в ScrollablePage

Когда прямые дочерние элементы Kirigami.ScrollablePage выходят по вертикали за пределы размера самой страницы, у правого края страницы появляется полоса прокрутки, и страница становится прокручиваемой.

Две прокручиваемые страницы, каждая из которых содержит ListView с собственным содержимым (снимок экрана NeoChat)

Часто в Kirigami.ScrollablePage содержится несколько дочерних элементов, и расположить их бывает непросто — особенно в сочетании с ListView.

Для невизуальных компонентов их размещение внутри компонента ListView не изменит внешний вид страницы, поэтому их можно переместить в область видимости списка. То же относится к элементам, привязанным к центру страницы, например к сообщениям-заполнителям для пустых списков.
Для других элементов, возможно, имеет смысл переместить их в заголовок или нижний колонтитул Kirigami.ScrollablePage. Часто это относится к строкам поиска.

PlaceholderMessage

Есть возможность добавить Kirigami.PlaceholderMessage с инструкциями на случай, если список пуст.

Kirigami.ScrollablePage {
    ListView {
        id: listView
        Kirigami.PlaceholderMessage {
            anchors.centerIn: parent
            width: parent.width - (Kirigami.Units.largeSpacing * 4)
            visible: listView.count === 0
            text: i18n("No data found")
            helpfulAction: Kirigami.Action {
            text: i18n("Load data")
                // Больше кода…
            }
        }
        model: // Код модели…
    }
}

Поиск в ListView

Поле поиска часто добавляется на Kirigami.ScrollablePage, чтобы фильтровать ListView. Для этого можно изменить titleDelegate по умолчанию так, чтобы вместо него использовался Kirigami.SearchField.

Kirigami.ScrollablePage {
    titleDelegate: Kirigami.SearchField {
        Layout.topMargin: Kirigami.Units.smallSpacing
        Layout.bottomMargin: Kirigami.Units.smallSpacing
        Layout.fillHeight: true
        Layout.fillWidth: true
        onTextChanged: mySortFilterModel.filterText = text
        KeyNavigation.tab: listView
    }

    ListView {
        id: listView
        // Остальная часть кода представления списка…
    }
}

Подсказка

Можно использовать KSortFilterProxyModel из KItemModel, чтобы легко добавить возможность фильтрации непосредственно в QML без необходимости писать код на C++.

Потяните для обновления

Ещё одна функция, предоставляемая этим компонентом, — действие «потянуть для обновления». Чтобы воспользоваться им, включите его следующим образом:

Kirigami.ScrollablePage {
    id: view
    supportsRefreshing: true
    onRefreshingChanged: {
        if (refreshing) {
            myModel.refresh();
        }
    }
    ListView {
        // ПРИМЕЧАНИЕ. MyModel не входит в состав компонентов — это лишь пример того, как его можно
        // использовать вместе с логикой приложения, которая обновляет модель списка и подаёт сигнал
        // по завершении.
        model: MyModel {
            onRefreshDone: view.refreshing = false;
        }
        delegate: BasicListItem {}
    }
}

Потянув вниз, можно также включить специальный режим с увеличенным верхним отступом, упрощающий использование приложения одной рукой.

Стеки страниц (page rows и page stacks)

Карточки