Qt Quick StackView Detailed (1)

QT Quick has a stackview, I did not mention in the book "QT Quick Core Programming ", recently someone asked, took the opportunity to learn a bit, the basic usage of it recorded.

I'm going to tell you two times. For the first time, basic usage, including the use of StackView scenarios, basic properties, and methods, is spoken. The second time to talk about something slightly more complex, such as the life cycle of the view managed by StackView, delegate customization, search, etc.

The example used to create the build dynamically, you can refer to my previous article "Qt Quick Component and Object dynamic Creation ". Anchor layout is also used, refer to "Qt Quick Layout Introduction ". You will also use buttons, Rectangle, Mousearea, text and other basic elements, please refer to the "Qt Quick Core Programming " book.

StackView Introduction

The StackView implements a stack-type navigation. " Stack " We all know what is going on, is a data structure, advanced (FILO), support pop, push and other operations. StackView is used for stack-like behavior to manage a series of view (pages or views), which may have an intrinsic link between them, according to business needs, can be a first level to the depths of the jump, the current view on what happened, It is possible to generate a new view or return to the previous page.

Give two simple scenes.

For example, to register the account of this scenario, there is a practice is divided into several steps, such as the first step to let you enter the user name, password, you click Next after the new page will appear, and then let you enter the name, hobby, mailbox, social way and so on.

For example, you submit a resume on a recruitment site, first fill in the basic information, such as name, graduation school, contact, job intent, and then next, let you add work experience ... Go down all the way next. Speaking of which, you can read an article I wrote earlier, the most complete Programmer's job Search channel summary .

StackView is a subclass of Focusscope, and Focusscope is a subclass of item. Judging from this succession relationship, StackView is going to be a window child (child's child can also, child's child's child can also ...). ) to use. Of course, if you use Qquickview to load MAIN.QML, StackView can also act as the root node of the main.qml, without nesting in a window.

StackView has several properties:

• Busy indicates whether the StackView is applying the transition animation, or true to indicate that the animation is being applied. You can respond to changes in busy properties by changing the property's signal processor onbusychanged, and do some processing with our business needs, such as banning user clicks during animations.
• CurrentItem a view (Item) that points to the top of the stack and may be empty.
• The delegate is used to customize transition animations when a page is toggled.
• The depth of the depth stack, when there is no sub-page in StackView, depth is 0, there is a sub-page, depth is 1 ...
• Initialitem the initial view (Item). This property allows us to specify the first page of the StackView Management (View), and if you assign a value to Initalitem at initialization, the effect is equivalent to calling push in the component.oncompleted signal processor (youritem )。 If you do not explicitly assign a value to Initalitem, this property is automatically assigned when the first page is push into StackView.

There are several ways to StackView:

• Clear (), as the name implies, kills all pages managed by StackView
• Pop (item), out of the stack operation. When a pop is called without a parameter, the page pops up at the top of the stack. If with parameters, all pages after the page specified by the parameter are ejected. For example, now that the page in the stack is Jiangzi, [A,b,c,d,e],pop () is called and becomes [A,b,c,d]. If you call Pop (B) again, it will become a [a, a, a].
• Push (item), the stack operation, the parameter is item, a page is pressed into the stackview. This page (Item) is typically created dynamically. We'll see the example later. There is a special use that can replace the top element of the stack, such as your stack is [A,b,c,d],push (e, replace), will use E to replace the top of the stack D, the stack will become [a,b,c,e]. For push, there are some other uses, refer to QT help.
• Find (func, Onlysearchloadeditems), looking for a page managed by StackView. Find will apply the Func method to each page within the stack, and when Func returns True, the lookup process will stop and find will return the item that was found.
• Completetransition () to end the transition animation immediately.

Just a few more words. StackView itself is actually a normal item, which can be seen from its class inheritance relationship. So, you can specify its size (width, height), or you can use layouts such as anchors. StackView Management of the page, will be as StackView children, these sub-view, the default will be filled with stackview available area, we can not use anchors to layout sub-page, if you use anchors for sub-view, The animated effect of the page switch is invalidated. Also, specifying the size of the sub-page (width, height) also doesn't work. So, it's a matter of saving.

StackView Example

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

We see that in the GIF above, clicking on the Next button creates a new page and adds the page to StackView, which has an animated effect when the page is toggled. This animation effect is the default effect provided by StackView, and if we want to change it, it can be customized by the delegate property.

Here's all the code:

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 (); }            }        }    }}

A simple explanation of the above code, the ID of the stack StackView, the inside of a text element, click on the creation of the first page. The page is provided by the component embedded in the MAIN.QML.

The component with the page ID is a rectangle object, and the color is determined by the StackView depth property. Inside the rectangle, a text is placed in the middle, the bottom is clear, Home, back, next several buttons, in the onclicked signal processor of these buttons, called the StackView clear, pop, push and other methods.

You can use Qmlscene to load the sample QML document, or you can create a QT Quick app from Qt Creator to see the effect. It is recommended to use the QT SDK 5.3.0 and later.

OK, this time we'll be here first. Next time we talk about the life cycle of the StackView managed pages (view), find the view, animate the custom, and so on.

For more QT Quick articles please refer to my qt quick column .
, want to learn some qt quick (QML), please read "QT Quick Core programming ".
I opened the subscription number "program Horizon", attention can be the first time to see my original article and I recommend the wonderful article:

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Qt Quick StackView Detailed (1)