MyTetra Share
Делитесь знаниями!
http://www.serwin.ru/price-list/ ремонт окон пвх в москве цены ремонт пвх окон цены.
Читать информацию про Max Polyakov.
Как пользоваться StackView в QML
08.02.2018
14:21
Текстовые метки: qml, stack, view, stackview, переключение, окно, страница, анимация, переход, animation, transition
Раздел: Компьютер - Программирование - Язык C++ - Библиотека Qt - QML - Краткая памятка по QML

Тип 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, поэтому для одинакового поведения их переопределять не нужно.


Так же в этом разделе:
 
MyTetra Share v.0.52
Яндекс индекс цитирования