StackView of Qt Quick (2), qtstackview

StackView of Qt Quick (2), qtstackview

In theStackView (1)", We learned the basic usage of StackView. This time, we will discuss topics such as delegate customization, managed View lifecycle, and View searching.

This article also uses"StackView (1).

Additional attributes

First, let's take a look at the additional attribute Stack provided by StackView (which will be used later ):

• Stack. index. index indicates the index of the current Item in StackView. It starts from 0 and is different from StackView. depth. depth starts from 1.
• Stack. status, which is an enumeration value and represents the status of the current Item.
• Stack. view, pointing to the StackView instance to which the current Item belongs

You can directly access the additional attributes in the items managed by StackView. An example is provided later.

View

StackView has a find method: find (func, onlySearchLoadedItems ). This method allows us to provide a comparison function, which will apply the specified func function to the page managed by StackView. When func returns true, it is considered that the required View, find () the View is returned. When the second parameter onlySearchLoadedItems is true, it indicates that only the items loaded into the memory are searched. If it is false, all items are searched.

Let's look at a simple example. Based on the previous example, I made a note of the modified content.

Import QtQuick 2.4 import QtQuick. controls 1.3 import QtQuick. window 2.2 Window {title: "StackViewDemo"; width: 480; height: 320; visible: true; StackView {id: stack; anchors. fill: parent;/* onBusyChanged: {console. log ("busy-" + stack. busy);} */Text {text: "Click to create first page"; font. pointSize: 14; font. bold: true; color: "blue"; anchors. centerIn: parent; MouseArea {anchors. fill: pare Nt; 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); property alias text: txt. text; // property alias Text {id: txt; // new code anchors. centerIn: parent; font. pointSize: 24; font. bold: true; color: stack. depth <= 4? Qt. lighter (parent. color): Qt. darker (parent. color); // assign values to the text attribute in onCompleted // avoid attribute binding for easy search. Component. onCompleted: {text = "depth-" + stack. depth ;}} 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 (st Ack. 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. clea R () ;}// new code Button {id: popTo3; anchors. right: clear. left; anchors. top: next. top; anchors. rightMargin: 8; text: "PopTo3"; width: 70; height: 30; onClicked: {var resultItem = stack. find (function (item) {console. log (item. text); return item. text = "depth-3 "? True: false;}); if (resultItem! = Null) stack. pop (resultItem );}}}}}

I added a PopTo3 button to the component whose id is page and clicked it to return to the stack until the stack depth is 3.

The order in which the find () method looks up is from the top of the stack to the bottom of the stack. If no value is found, null is returned. If pop (null) is called, it is directly returned to the bottom of the stack, that is, the stack depth is 1. So I made a judgment in the Code. If find returns null, it will not call pop.

There are still some changes in the Code. To facilitate Text search, I added an attribute alias to the Rectangle of the page, pointing to the text attribute of its internal Text object.

In fact, if the get (index) method of StackView is used, the onClicked Signal Processor of PopTo3 can be rewritten as follows:

onClicked: {    var resultItem = stack.get(2);    if(resultItem !== null)stack.pop(resultItem);}

It's simpler. Of course, if you insist on using find, you can also use the additional attributes for more efficient search:

    onClicked: {        var resultItem = stack.find(                    function(item){                        console.log(item.text);                        return item.Stack.index == 2;                    }                    );        if(resultItem !== null)stack.pop(resultItem);    }

Lifecycle

As we mentioned earlier, StackView management pages are usually dynamically created. Therefore, these dynamically created objects must be destroyed when appropriate. Otherwise, the memory will be leaked, this is a tragedy.

StackView takes over the lifecycle of the Page Object (View) It maintains. When we call pop, the items in the stack will be destroyed. This can be verified by adding a Component. onDestruction signal processor to the Rectangle object in the page Component. The Code is as follows:

Component.onDestruction: console.log("destruction, current depth - " + stack.depth);

When you call pop (item) or clear (), the destruction of the Item is triggered.

OK. We can feel relieved to understand this.

In addition, an Item is in many States in StackView:

Items that are not on the top of the stack are all inactive. Items at the top of the stack are active when StackView is visible. items at the top of the stack are inactive when StackView is invisible.

For more details, see the help of Qt.

To detect the status change of an Item, you can process the change processor of the additional attribute status provided by StackView. The specific code is:

Stack.onStatusChanged: console.log("status of item " + Stack.index + ": " + Stack.status);

As you can see, we use the Stack. status additional attribute, which is an enumeration value. You can take the following values down:

• Stack. Inactive: 0, invisible
• Stack. Activating: 2, active
• Stack. Active: 3. Active status
• Stack. Deactivating: 1, being inactive

Well, with these values, you can observe the status changes of an Item in the log.

StackViewDelegate)

The delegate attribute of StackView allows you to customize the transition animation (push, pop, replace) during page switching. Its type is StackViewDelegate.

StackViewDelegate has the following attributes:

• PopTransition, type: Component, specifying the stack transition.
• PushTransition. Its type is Component. It specifies the inbound stack transition.
• ReplaceTransition, whose type is Component, specifies the transition of the replacement operation.

Generally, pushTransition should be an instance of StackViewTransition. StackViewTransition is a subclass of ParallelAnimation and has two attributes: exitItem and enterItem. We can specify two animations and apply them to exitItem and enterItem respectively, when the transition occurs, the two animations are executed simultaneously.