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

標籤：enter   velocity   track   _id   trigger   應用   特效   ios   sys   

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就能夠達到情境切換的目的了。

         一個情境瞬間切換也是很easy的，要想使用一些特效的話。就要充分發揮開發人員的思維，讓介面變得豐富多彩！

以下是我使用上一篇博文談到的粒子系統來實現絢麗的情境切換特效：

以下是實現的代碼：

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;    }}

在我製作的

recrefer=SE_D_%E5%90%83%E8%8D%AF%E4%BA%86#btn-install-now-log">第一款獨立遊戲《吃藥了》中，我精心設計了一種有趣的情境切換的方式：首先用大約6000粒膠囊覆蓋主主情境。然後在後面一層設定對應層的visible，等到膠囊消失以後就呈現下一個情境了。

articleid=34840415">本文參加了CSDN博文大賽，請大家支援我，為我投一票。

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