Тип StackView используется для организации переключения страниц по принципу стека. Его имеет смысл использовать, когда интерфейс организован по правилу "страница режима - страница подрежима", то есть когда для выполнения каких-то действий пользователь попадает на страницу подрежима, а выход из страницы подрежима происходит на страницу предыдущего режима.

Чтобы переключиться на новую страницу, с помещением ее на вершину стека, используется метод push(id_страницы). Чтобы выйти со страницы на предыдущую страницу, используется метод pop().

В принципе, можно организовывать и другие переходы между страницами, так как страницы в стеке можно заменять (метод replace()) и можно выпрыгивать не на предыдущую страницу, а, например, на самую первую в стеке.

При создании элемента StackView обязательно надо указать первую страницу через свойство initialItem.

Вот пример готового минимального приложения, в котором используется StackView:

import QtQuick 2.6

import QtQuick.Window 2.2

import QtQuick.Controls 1.4

Window {

id: mainWindow

visible: true

width: 1280

height: 720

StackView {

id: stackView

anchors.fill: parent

focus: true

initialItem: mainMenuStackComponent

// Описание первой страницы

Component {

id: mainMenuStackComponent

// На первой странице находится основное меню

// с кнопками "Игра" и "Настройки"

MainMenu {

id: mainMenu

anchors.fill: parent

enabled: Stack.status === Stack.Active

}

}

// Описание второй страницы

Component {

id: gamePanelStackComponent

GamePanel { // На второй странице находится игра

id: gamePanel

anchors.fill: parent

enabled: Stack.status === Stack.Active

}

}

// Описание третьей страницы

Component {

id: propertiesMenuStackComponent

PropertiesMenu { // На третьей странице находятся настройки

id: propertiesMenu

anchors.fill: parent

enabled: Stack.status === Stack.Active

}

}

// Реализация возврата на предыдущую страницу

// при нажатии Key_Back на мобильном устройстве

// Срабатывает для всех страниц

Keys.onReleased: {

if (event.key === Qt.Key_Back)

pageBack(event);

}

// Реализация возврата на предыдущую страницу

// при нажатии ESC на обычной клавиатуре

// Срабатывает для всех страниц

Keys.onPressed: {

if (event.key === Qt.Key_Escape)

pageBack(event);

}

// Обработка нажатия кнопки выхода с текущей страницы

function pageBack(event) {

if( stackView.depth > 1 ) {

stackView.pop()

event.accepted = true

}

}

// Настройка механизма перехода между страницами

delegate: StackViewDelegate {

// Настройка анимации перехода

pushTransition: StackViewTransition {

// Для упрощения анимация отключена

// Данное место переопределяет

// стандартную анимацию с полупрозрачностью

// Пример анимации с уменьшением масштаба - она лучше

// стандартного перехода прозрачности,

// так как нет наложения картинок, которое медленно рендерится

/*

PropertyAnimation {

target: enterItem

property: "scale"

from: 0

to: 1

}

PropertyAnimation {

target: exitItem

property: "scale"

from: 1

to: 0

}

*/

}

}

}

}

В типе MainMenu есть две кнопки, которые выполняют такой код:

onClicked: {

stackView.push( gamePanelStackComponent );

}

...

onClicked: {

stackView.push( propertiesMenuStackComponent );

}

Таким образом, из главного меню можно попасть на страницы игры и настроек. Со страницы игры можно попасть в главное меню. Со страницы настроек тоже можно попасть в главное меню.

В данном коде так же показан пример переопределения анимации перехода (transition) между страницами. Стандартная анимация перехода (если она не переопределена) делается через изменение прозрачности, что не всегда приемлемо и с тормозами рендерится на слабых устройствах. Если pushTransition переопределено как пустое StackViewTransition, то анимация перехода отключается. Анимации popTransition и replaceTransition, если не переопределено иного, делают такое же преключение, что и pushTransition, поэтому для одинакового поведения их переопределять не нужно.