【Qt开发】qml页面的创建、呈现与销毁

先呻吟一下：win8与qt项目并着来做，压力有点大...

初步接触qml，感觉很难上手。首先是参考资料较少，好的论坛少，语法咋看上去也有点怪怪的。相对于操着各种长枪短跑的xaml，qml显得有点寒酸。

好吧，下面言归正传。

创建页面

qml页面也就是一个组件，页面创建后需要手动销毁。我们可以这样创建一个qml组件:

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

editPage是将要显示的页面；mainPage是editPage的父级页面，也就是editPage返回后的上一级页面。

页面呈现

事实上，如果创建的页面，没有特别地定义它的opacity属性为0的话，这个页面就会被呈现在程序中。qml组件的创建和销毁就像压栈出栈一样，不是说呈现的页面把原来的页面给替换了，而是把它覆盖了而已。

如果想加上过渡的动画，可以利用states和transition这两个属性来实现，如下面代码所示：

    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 }

        }

    ]

代码中mainArea其实就是这个页面的id；页面定义了两个state: show,hide，用来控制mainArea的opacity的值；定义了两个transition过程：从show到hide，从hide到show，动画时间为200ms。

页面的销毁

如果创建了一个组件对象，却没有即使销毁它的话，会增加系统的内存开销和负担。那么在页面返回时，我们可以通过js的destroy()方法来实现对象的销毁和空间的回收:

myEditPage.destroy()

myEditPage是对象自身的id。在对象内来销毁自身，看起来有点奇怪；但事实上destroy()会调用槽函数: deleteLater()，也就是常用的异步操作，也避免了UI的阻塞。