StackView of Qt Quick (1), qtstackview

StackView of Qt Quick (1), qtstackview

Qt Quick has a StackView 《Qt Quick core programmingNot mentioned in this book. Recently someone asked me to take the opportunity to learn and record its basic usage.

I'm going to talk about it twice. The first time I spoke about the basic usage, including the applicable scenarios, basic attributes, and methods of StackView. For the second time, I will talk about something slightly complex, such as the lifecycle, delegate customization, and search of views managed by StackView.

The examples will use dynamic creation. For more information, see my previous article"Dynamic Creation of Qt Quick components and objects". The anchor layout is also used. For more information, see"Introduction to Qt Quick Layout". Button, Rectangle, MouseArea, Text, and other basic elements are also used. For more information, see 《Qt Quick core programming.

StackView Introduction

StackView implements a stack-based navigation. "StackWe all know what the problem is. It is a data structure, first-in-first-out (FILO), supporting pop, push, and other operations. StackView is used to manage a series of views (pages or views) in similar stack behavior modes. These views may have internal relationships. Based on business needs, you can jump to the depths of a level-1 View, if something happens on the current View, a new View may be generated or the previous page may be returned.

Let's look at two simple scenarios.

For example, in the account registration scenario, there are several steps. For example, the first step allows you to enter the user name and password. After you click Next, a new page appears, then let you enter your name, hobbies, email address, and social networking.

For example, if you submit a resume on a recruitment website, you must first fill in the basic information, such as the name, the School of graduation, contact information, and the intention to apply for a job. Next, let you add work experience ...... Next. Here, you can refer to an article I wrote earlier,Summary of the most comprehensive programmer job search channels in history.

StackView is a subclass of FocusScope and FocusScope is a subclass of Item. From this inheritance relationship, StackView should be used as a Window child (either a child or a child's child ......) . Of course, if you use QQuickView to load main. qml, StackView can also be used as the root node of main. qml without being nested in a Window.

StackView has several attributes:

• Busy indicates whether the StackView is applying a transition animation. If it is set to true, it indicates that the animation is being applied. You can use the attribute change signal processor onBusyChanged to respond to busy attribute changes and handle them based on our business needs. For example, you are not allowed to click during animation.
• CurrentItem points to the View (Item) at the top of the stack, which may be empty.
• Delegate is used to customize the transition animation during page switching.
• Depth of the depth stack. If no subpage exists in the StackView, depth is 0. If there is a subpage, depth is 1 ......
• The initial View (Item) of initialItem ). We can use this attribute to specify the first page (View) managed by StackView. If you assign a value to initalItem during initialization, the effect is equivalent to that in Component. the onCompleted signal processor calls push (yourItem ). If you do not explicitly assign values to initalItem, this attribute is automatically assigned when the first page is pushed to StackView.

StackView has several methods:

• Clear (), as its name implies, removes all pages managed by StackView.
• Pop (item. When no parameter is called for pop, the top stack page pops up. If a parameter is included, all pages after the page specified by the parameter are displayed. For example, after calling [A, B, C, D, E] and pop () on the pages in the stack, it becomes [A, B, C, d]. If you call pop (B) Again, it will become [A, B].
• Push (item), the input stack operation, the parameter is Item, push a page into StackView. This page (Item) is generally dynamically created. We can see the example later. There is A special usage that can replace the top elements of the stack. For example, your stack is [A, B, C, D], push (E, replace ), replace D on the top of the stack with E, and the stack is changed to [A, B, C, E]. For more information about push, see Qt help.
• Find (func, onlySearchLoadedItems) to find a page managed by StackView. Find will apply the func method to each page in the stack. When func returns true, it indicates that it has been found, and the search process will stop. Then find will return the found Item.
• CompleteTransition (): ends the transition animation immediately.

Let's say a few more words. StackView itself is actually a normal Item, which can be seen from its class inheritance relationship. Therefore, you can specify its size (width and height), or use anchors and other la S. The pages managed by StackView are used as children of StackView. By default, these sub-views are full of available regions of StackView. We cannot use anchors to layout sub-pages, if you use anchors for the sub-View, the animation effect during page switching will become invalid. Another point is that the size (width and height) of the stator page does not work. So it's easy.

StackView example

A very simple example is designed, as shown in the following figure:

We can see that in the above GIF, clicking the Next button will create a new page and add this page to StackView. There is an animation effect during page switching. This animation effect is the default effect provided by StackView. If you want to change it, you can use the delegate attribute to customize it.

All the code is here:

import QtQuick 2.4import QtQuick.Controls 1.3import QtQuick.Window 2.2Window {    title: "StackViewDemo";    width: 480;    height: 320;    visible: true;    StackView {        id: stack;        anchors.centerIn: parent;        width: 600;        height: 300;        property var home: null;        Text {            text: "Click to create first page";            font.pointSize: 14;            font.bold: true;            color: "blue";            anchors.centerIn: parent;            MouseArea {                anchors.fill: parent;                onClicked: if(stack.depth == 0)stack.push(page);            }        }    }    Component {        id: page;        Rectangle {            color: Qt.rgba(stack.depth*0.1, stack.depth*0.2, stack.depth*0.3);            Text {                anchors.centerIn: parent;                text: "depth - " + stack.depth;                font.pointSize: 24;                font.bold: true;                color: stack.depth <= 4 ? Qt.lighter(parent.color) : Qt.darker(parent.color);            }            Button {                id: next;                anchors.right: parent.right;                anchors.bottom: parent.bottom;                anchors.margins: 8;                text: "Next";                width: 70;                height: 30;                onClicked: {                    if(stack.depth < 8) stack.push(page);                }            }            Button {                id: back;                anchors.right: next.left;                anchors.top: next.top;                anchors.rightMargin: 8;                text: "Back";                width: 70;                height: 30;                onClicked: {                    if(stack.depth > 0) stack.pop();                }            }            Button {                id: home;                anchors.right: back.left;                anchors.top: next.top;                anchors.rightMargin: 8;                text: "Home";                width: 70;                height: 30;                onClicked: {                    if(stack.depth > 0)stack.pop(stack.initialItem);                }            }            Button {                id: clear;                anchors.right: home.left;                anchors.top: next.top;                anchors.rightMargin: 8;                text: "Clear";                width: 70;                height: 30;                onClicked: {                    if(stack.depth > 0)stack.clear();                }            }        }    }}

The code above is a stack StackView with the id. A Text element is added internally and the first page is created when you click it. Pages are provided by Component embedded in main. qml.

A component whose id is page. The top-level element is a Rectangle object. The color is determined by the depth attribute of StackView. The Rectangle contains a Text in the middle, and the Clear, Home, Back, And Next buttons are placed at the bottom. In the onClicked Signal Processor of these buttons, the clear, pop, and push methods of StackView are called.

You can use qmlscene to load the example qml document, or you can use Qt Creator to create a Qt Quick App to view the effect. We recommend that you use Qt SDK 5.3.0 or later.

OK. This is the first time. Next, let's talk about the lifecycle, search for View, animation customization, and other content of the page (View) managed by StackView.

For more information about Qt Quick, see myQt Quick Column.
To learn more about Qt Quick (QML), read 《Qt Quick core programming.
I have activated the subscribe code "program horizon". I will immediately see my original articles and the wonderful articles I recommend:

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.