SwipeView

Элемент SwipeView представляет контейнер, где каждый элемент представляет отдельную страницу, а пользователь касанием пальца может пролистывать эти страницы. Хотя данный элемент ориентирован прежде всего на мобильные устройства, но он также поддерживат перемещение по списку элементов с помощью клавиатуры, поэтому на десктопах его также можно использовать.

SwipeView определен в пакете "QtQuick.Controls" и наследуется от типа Container. Простейшее определение SwipeView:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    SwipeView {
        anchors.fill: parent
        focus: true // для прокрутки клавиатурой

        Text {text: "Page 1"}
        Text {text: "Page 2"}
        Text {text: "Page 3"}
    }
}

В качестве элементов в SwipeView можно использовать различные типы элементов QML. В данном случае SwipeView имеет три элемента, каждый из которых представляет тип Text. И фактически каждый такой элемент можно рассматривать как отдельную страницу в SwipeView. Одномоментно отображается только одна страница (по умолчанию самая первая):

В примере выше установлено свойство focus: true, благодаря чему можно перемещаться по страницам с помощью клавиш-стрелок Вправо-Влево на клавиатуре

Если при загрузке SwipeView надо, чтобы отображалась определенная страница, то ее можно установить с помощью свойства currentIndex (индексация начинается с 0).

Индикатор страниц

С помощью элемента PageIndicator можно установить графический индикатор страниц. Его свойство count хранит количество страниц, а свойство currentIndex - индекс текущей страницы. Используем PageIndicator:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    SwipeView {
        id: view       // для связи с PageIndicator
        anchors.fill: parent
        focus: true

        Text {text: "Page 1"}
        Text {text: "Page 2"}
        Text {text: "Page 3"}
    }

    PageIndicator {
        id: indicator

        count: view.count       // количество страниц
        currentIndex: view.currentIndex // текущая страница

        anchors.bottom: view.bottom
        anchors.horizontalCenter: parent.horizontalCenter
    }
}

В данном случае свойства PageIndicator привязаны к свойствам count и currentIndex элемента SwipeView, которому назначен идентификатор view. В итоге внизу SwipeView будет отображаться индикатор страниц: