[QT Development] Create, present, and destroy a qml page

The Win8 and QT projects are under great pressure...

It is difficult to get started with qml. First, there are few references and few good forums, and the syntax seems a little strange. Compared with the XAML running a variety of short guns, qml isA little shabby. (Sorry, The qml examples and demos are more detailed and worth learning ).

Okay, let's get down to the truth.

Create page

The qml page is also a component and needs to be manually destroyed after the page is created. We can create a qml component as follows:

var editPage = Qt.createComponent("EditPage.qml").createObject(mainPage);

Editpage is the page to be displayed; mainpage is the parent page of editpage, that is, the previous page after the editpage is returned.

Page rendering

In fact, if the created page does not specifically define its opacity attribute as 0, the page will be displayed in the program. The creation and destruction of the qml component is just like pushing the stack out of the stack. It does not mean that the displayed page replaces the original page, but overwrites it.

To add a transition animation, you can use the states and transition attributes, as shown in the following code:

    states: [

        State {

            name: "hide"

            PropertyChanges {

                target: mainArea

                opacity: 0

            }

        },

        State {

            name: "show"

            PropertyChanges {

                target: mainArea

                opacity: 1

            }

        }

    ]

    transitions: [

        Transition {

            from: "hide"

            to: "show"

            NumberAnimation { properties: "opacity"; easing.type: Easing.Linear; duration: 200 }

        },

        Transition {

            from: "show"

            to: "hide"

            NumberAnimation { properties: "opacity"; easing.type: Easing.Linear; duration: 200 }

        }

    ]

In the code, mainarea is actually the ID of this page. The page defines two states: Show and hide, which are used to control the opacity value of mainarea. Two transition processes are defined: From show to hide, from hide to show, the animation time is 200 ms.

Page destruction

If a component object is created but not destroyed in time, the system memory overhead and burden will be increased. When the page is returned, we can use the destroy () method of js to destroy objects and reclaim space:

myEditPage.destroy()

Myeditpage is the object's own ID. It seems a bit strange to destroy itself in the object. But in fact, destroy () will call the slot function: deletelater (), which is also a common asynchronous operation, which also avoids UI blocking.