Qt行動裝置 App開發（五）：情境切換

標籤：android   qt   行動裝置 App開發   

Qt行動裝置 App開發（五）：情境切換

         上篇文章講到了如何用QtQuick實現絢麗的粒子特效。粒子特效的出現可以說給了開發人員一個個人化介面開發的一個契機，以後可以創造出更多有趣的介面出來，並適配到Android、iOS等移動平台上，從而讓你的程式變得更加有趣！

原創文章，反對未聲明的引用。原部落格地址：http://blog.csdn.net/gamesdev/article/details/34840415

         這一次我將介紹我在實際應用開發的時候是如何?情境的切換的。情境的切換問題是一個架構上的問題，有很多的實現方式，而Qt Quick也提供了很多實用的類，以便我們進行情境的切換。在QML中，情境切換實質上就是將一個介面類隱藏，而另外一個介面類顯示的方法。下面的代碼就是一個簡單的例子：

import QtQuick 2.2import QtQuick.Controls 1.1ApplicationWindow{    visible: true    width: 640    height: 480    title: qsTr("Hello World")    Item    {        id: scene_1        visible: true        anchors.fill: parent        Text        {            anchors.centerIn: parent            textFormat: Text.RichText            text: qsTr( "<h1><font color=red>這是第一個情境</color></h1>" )        }        MouseArea        {            anchors.fill: parent            onClicked:            {                scene_1.visible = false;                scene_2.visible = true;            }        }    }    Item    {        id: scene_2        visible: false        anchors.fill: parent        Text        {            anchors.centerIn: parent            textFormat: Text.RichText            text: qsTr( "<h1><font color=green>這是第二個情境</color></h1>" )        }MouseArea        {            anchors.fill: parent            onClicked:            {                scene_2.visible = false;                scene_1.visible = true;            }        }    }}

程式的示範效果如下：

首先出現的是左邊的情境，當滑鼠點擊表單的時候，就會彈出右邊的情境，紅色的文字也會消失。

         這個例子主要使用Item的visible屬性，將原有Item的visible設為false，然後將需要出現的Item的visible設為true就可以達到情境切換的目的了。

         一個情境瞬間切換也是非常簡單的，要想使用一些特效的話，就要充分發揮開發人員的思維，讓介面變得豐富多彩！下面是我使用上一篇博文談到的粒子系統來實現絢麗的情境切換特效：

下面是實現的代碼：

import QtQuick 2.2import QtQuick.Controls 1.1import QtQuick.Particles 2.0ApplicationWindow{    visible: true    width: 640    height: 480    title: qsTr( "測試情境切換" )    Item    {        id: scene_1        visible: true        anchors.fill: parent        Text        {            anchors.centerIn: parent            textFormat: Text.RichText            text: qsTr( "<h1><font color=red>這是第一個情境</color></h1>" )        }        MouseArea        {            anchors.fill: parent            onClicked: sceneTransition( scene_1, scene_2 )        }    }    Item    {        id: scene_2        visible: false        anchors.fill: parent        Text        {            anchors.centerIn: parent            textFormat: Text.RichText            text: qsTr( "<h1><font color=green>這是第二個情境</color></h1>" )        }        MouseArea        {            anchors.fill: parent            onClicked: sceneTransition( scene_2, scene_1 )        }    }    ParticleSystem    {        anchors.centerIn: parent        ImageParticle        {            source: "qrc:///circle.png"            colorVariation: 0.75        }        Emitter        {            id: emitter            enabled: false            emitRate: 2000            size: 32            lifeSpan: 4000            velocity: AngleDirection            {                magnitude: 200                angleVariation: 360            }            Timer            {                id: emitterTimer                running: emitter.enabled                interval: 2000                property var nextScene                property var thisScene                onTriggered:                {                    thisScene.visible = false;                    nextScene.visible = true;                    emitter.enabled = false;                }            }        }    }    function sceneTransition( thisScene, nextScene )    {        emitterTimer.thisScene = thisScene;        emitterTimer.nextScene = nextScene;        emitter.enabled = true;    }}

在我製作的第一款獨立遊戲《吃藥了》中，我精心設計了一種有趣的情境切換的方式：首先用大約6000粒膠囊覆蓋主主情境，然後在後面一層設定相應層的visible，等到膠囊消失以後就呈現下一個情境了。

本文參加了CSDN博文大賽，請大家支援我，為我投一票！