Qt Quick StackView Detailed (2)

In "StackView detailed (1)", we learned the basic usage of stackview, this time, we talk about delegate custom, managed view life cycle, find view and other topics.

This article also uses the example in "StackView detailed (1)" and can look back if necessary.

Attached properties

First look at the attached property Stack provided by StackView (which is used later):

• Stack.index,index represents the current item in the StackView index, starting from 0 Oh, unlike stackview.depth Oh, depth starting from 1.
• Stack.status, which is an enumeration value that represents the state of the current item.
• Stack.view, pointing to the StackView instance to which the current item belongs

We can directly access the attached property in the StackView managed item, followed by an example.

Find View

StackView has a Find method: Find (Func, Onlysearchloadeditems). This method allows us to provide a comparison function that applies the specified Func function to the StackView managed page, and when Func returns True, it is assumed that finding the desired view,find () will return the view. When the second parameter, Onlysearchloadeditems, is true, the description finds all item only when the item is loaded into memory, or false.

Let's look at a simple example, based on the previous example of the modification, where I made the annotation.

Import QtQuick 2.4import qtquick.controls 1.3import qtquick.window 2.2Window {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: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); 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 a value to the Text property in OnCompleted//Avoid property binding for easy lookup.                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 (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 ();                }}//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 give the ID page component, add a PopTo3 button, click on it, will go back to the stack, until the depth of the stack is 3.

The order in which the find () method is found is from the top of the stack to the bottom of the stack. Returns null if it is not found. If you call pop (null), it will go directly to the bottom of the stack, that is, the stack depth is 1. So I made a judgment in the code that if find returns null, no pop is called.

There are some changes in the code, for the convenience of text lookup, I added a property alias to the page's rectangle, which points to the Text property of the text object inside it.

In fact, if you use the StackView Get (Index) method, the PopTo3 onclicked signal processor can also be rewritten as follows:

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

It's even easier. Of course, if you stick with find, you can also combine additional attributes to make more efficient lookups:

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

Life cycle

As we mentioned earlier, the StackView Management page, which is usually created dynamically, will need to be destroyed at the right time, otherwise the memory leaks, it's tragic.

StackView takes over the life cycle of the Page object (View) it maintains. When we call pop, the item that is out of the stack is destroyed. This can be verified by adding a component.ondestruction signal processor to the rectangle object within the page component, with the following code:

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

When you call Pop (item) or clear (), the item's destruction is triggered.

OK, we're relieved to know that.

In addition, an item in the StackView, in fact, there are many states:

1. Instantiation, instantiation
2. Inactive, non-active
3. Activating, activating
4. Active, active
5. Deactivating, shifting to inactivity
6. Inactive, non-active
7. Destruction, destroy

The item that is not the top of the stack is in the inactive state. The item at the top of the stack is in the active state when the StackView is visible, and when StackView is not visible, the item at the top of the stack is in the inactive state.

For more information, please refer to QT help.

In order to detect the state change of an item, you can handle the change of the stackview provided by the status of the attached property. The specific code is:

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

As you can see, we've used the Stack.status attached property, which is an enumeration value that takes the following values:

• stack.inactive:0, not visible
• Stack.activating:2, activating
• Stack.active:3, activity status
• Stack.deactivating:1, is becoming inactive

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

Custom transition animations (stackviewdelegate)

The delegate property of StackView can be customized to transition animations (push, pop, replace) when the page is toggled, and it is of type stackviewdelegate.

Stackviewdelegate has the following properties:

• Poptransition, type component, specifies the stack transition.
• Pushtransition, type component, specifies the in-stack transition.
• Replacetransition, type component, specifies the transition for the replacement operation.

Generally, pushtransition should be an instance of Stackviewtransition, Stackviewtransition is a subclass of Parallelanimation, with Exititem and Enteritem two attributes, We can specify two animations to be applied to Exititem and Enteritem, and when transitions occur, these two animations are executed simultaneously.

For more information about transitions and animations, refer to QT help, or read the 12th chapter ofQT Quick Core programming , which provides a very detailed introduction to various animation elements and usages.

Stackviewdelegate also has two methods, often using the transitionfinished (properties) method.

Okay, here's a little example from the QT Help StackView page that explains:

StackView {    delegate: StackViewDelegate {        function transitionFinished(properties)        {            properties.exitItem.opacity = 1        }        pushTransition: StackViewTransition {            PropertyAnimation {                target: enterItem                property: "opacity"                from: 0                to: 1            }            PropertyAnimation {                target: exitItem                property: "opacity"                from: 1                to: 0            }        }    }}

The code above implements a simple fade transition.

As you can see, the value of the delegate property of StackView is an instance of Stackviewdelegate. Stackviewdelegate only initializes the pushtransition, and when we do not specify poptransition and replacetransition, they use the transition animation specified by Pushtransition.

Pushtransistion points to an instance of Stackviewtransition. This example provides two propertyanimation animations that adapt the Opacity property of the target. The Enteritem opacity changes from 0 to 1, and the effect is fade. The Exititem opacity changes from 1 to 0, and the effect is fading. In order for Exititem to return to normal, rewrite the transitionfinished method and restore the opactiy of Exititem back to 1.

Let's refer to this and add the fade animation to our example with the following 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.fill:parent;        Onbusychanged: {console.log ("busy-" + stack.busy);            } Text {id:clue;            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) {clue.visible = false;                           Stack.push (page);            }}} delegate:stackviewdelegate {function transitionfinished (properties)                {properties.exitItem.opacity = 1} pushtransition:stackviewtransition { Propertyanimation {target:enteritem;                    Property: "Opacity";                    from:0;                    To:1;                duration:2000;                    } propertyanimation {Target:exititem;                    Property: "Opacity";                    From:1;                    to:0;                duration:2000;        }}}} 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;                Anchors.centerIn:parent;                font.pointsize:24;                Font.bold:true; Color:stack.depth <= 4?                Qt.lighter (Parent.color): Qt.darker (Parent.color);                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 (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 ();                Clue.visible = true;                }} 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.           Stack.index = = 2;                     }                                );                if (Resultitem!== null) stack.pop (Resultitem);            }} Component.onDestruction:console.log ("Destruction, current Depth-" + stack.depth);        Stack.onStatusChanged:console.log ("Status of item" + Stack.index + ":" + stack.status); }    }}

To better demonstrate the fade animation effect, I set the Duration property of the Propertyanimation to 2000 milliseconds. Well, the effect is as follows:

Well, StackView introduced here. QT Help also has some content, you can read carefully, must be obtained.

For more QT quick articles, please refer to my qt Quick column for a systematic study of QT quick (QML), please read theQT 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 (2)