27.Qt Quick QML-State、Transition-有解無憂

1.State
所有組件均具有默認狀態，該狀態定義物件和屬性值的默認配置，可以通過向States屬性添加State組件來定義新狀態，以允許組件在不同配置之間切換.
許多用戶界面設計都是由State狀態實作的,比如: 交通信號將根據其State配置來實作紅黃綠燈交錯亮滅.
在QML中，狀態是在State物件中定義的一組屬性配置，例如，下面幾種用State狀態最為方便:

只顯示某些UI組件，隱藏其他組件
向用戶展示不同的可用操作
啟動、停止或暫停影片
更改特定Item的屬性值
顯示不同的視圖或screen

所有基于Item的物件都有一個states屬性和state屬性:

tates屬性 : list<State>型別,用來保存多個不同State物件的串列.
state屬性 : string型別,用來保存物件當前State物件的名稱(表示當前狀態是什么樣子的),默認是一個空字串,如果要改變Item物件當前狀態,則將state屬性設定為要改變的狀態name名稱即可.

對于非Item物件可以通過StateGroup組件配合來使用State即可

1.1 State物件屬性

name : string,狀態名稱，,每個狀態在都應具有唯一的名稱
changes : list<Change>,保存當前State下的多個Change物件,比如PropertyChanges、StateChangeScript、ParentChange等
extend : string,擴展,表示該狀態要在哪個State的基礎上進行擴展,當一個狀態要在另一個狀態基礎上進行擴展時，它將繼承該另一個狀態的所有changes
when : bool,當什么時候啟動狀態,默認值為false,比如:when: mouseArea.pressed,表示當有滑鼠按下則啟動該狀態.

1.2 Change物件

當一個物件的狀態發生改變,那么該物件展示給用戶的效果也會相應發生改變,所以State支持了多個不同Change物件供我們使用,有如下幾種:

PropertyChanges: 改變物件的屬性值
StateChangeScript:運行腳本,比如function函式
ParentChange: 改變物件的父類物件.并且改變物件在父類物件下的坐標xy,寬高等屬性
AnchorChanges: 改變物件的anchor值

由于幫助手冊都有很多示例,所以我們以PropertyChanges為例,來實作一個交通燈

1.3 交通燈示例

我們以交通信號為例,根據其State配置來實作紅黃綠燈交錯亮滅.效果如下所示:

代碼如下所示:

Window {
    width: 300;
    height: 400;
    visible: true;
    property var delayCnt: 0

    Rectangle {
        anchors.fill: parent
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#14148c" }
            GradientStop { position: 0.699; color: "#14aaff" }
            GradientStop { position: 0.7; color: "#80c342" }
            GradientStop { position: 1.0; color: "#006325" }
        }
    }

    Canvas {
        id: canvas
        anchors.centerIn: parent
        width: 80
        height: 300
        onPaint: {
            var ctx = getContext("2d")
            ctx.fillStyle = "black"
            ctx.fillRect(0,0,width,height-90)
            ctx.fillRect(width/2 -15,height-90,30,90)
        }
    }

    Column {
        id: leds
        anchors.centerIn: canvas
        anchors.verticalCenterOffset: -45
        spacing: 15
        state: delayCnt < 5 ? "red" :
               delayCnt < 10 ? "green" :
               delayCnt < 14 ? (delayCnt%2==0 ? "green" : "") :
               "yellow";

        Rectangle {
            id : redLed
            width: 50; height:50
            radius: width/2
            color: "red"
            opacity: 0.2
        }
        Rectangle {
            id : yellowLed
            width: 50; height:50
            radius: width/2
            color: "yellow"
            opacity: 0.2
        }
        Rectangle {
            id : greenLed
            width: 50; height:50
            radius: width/2
            color: "green"
            opacity: 0.2
        }

        states: [
            State {
                name: "red"
                PropertyChanges { target: redLed; opacity: 1}
            },
            State {
                name: "yellow"
                PropertyChanges { target: yellowLed; opacity: 1}
            },
            State {
                name: "green"
                PropertyChanges { target: greenLed; opacity: 1}
            }
        ]
    }
    Timer {
        interval: 500
        repeat: true
        running: true
        onTriggered: {
            delayCnt = (delayCnt+1)%18
            console.log(delayCnt,leds.state)
        }
    }
}

2.Transition
Transition用來當State發生改變時產生的一個過渡影片(有Transition的地方就會有State出現),使得狀態改變更加平滑，
并且所有基于Item的物件都有一個transitions屬性,是一個list<Transition>型別,保存著該物件所有的Transtion,只要當該物件的state發生改變時,就會去遍歷transitions屬性,如果有滿足條件的,則產生一個過渡影片.
給transitions賦值和給states賦值一樣,假如只有一個Transition,那么我們可以直接這樣寫:

transitions: Transition {
... ...
}

假如有多個Tansition,可以這樣寫:

transitions: [
    Transition {
        ... ...
    },
    Transition {
        ... ...
    } 
]

2.1 Transition物件屬性

animations : list<Animation>,default默認屬性,此屬性保存Transition中的影片串列，
enabled : bool,Transition使能,默認為true,如果為false則禁止
from : string,默認值為"*"(任何狀態),只要我們未設定from,那么每次轉換到另一個狀態時,就會將當前狀態賦到from中
to : string,默認值為"*"(任何狀態),只要我們未設定to,那么每次轉換到另一個狀態時,就會將另一個狀態賦到to中
reversible : bool,是否讓影片進行反轉,默認為false,只有當Transition使用了SequentialAnimation串行影片時,我們需要設定為true
running : bool,只讀屬性,保存當前是否在運行中.

2.2 使用串行影片時注意

一個Transition可以包含多個影片,并且多個影片默認為并行執行的,所以我們不需要設定reversible為true,因為這些影片沒有先后順序.
只有當Transition使用了SequentialAnimation串行影片時,我們才需要設定為true
如果屬性同時系結在Transition包含的影片里和Behavior包含的影片里,那么Behavior將會被代替

2.3 在交通燈基礎上添加過渡影片

我們在上個示例的leds物件中添加下面代碼:

transitions: Transition {
            PropertyAnimation  { target: redLed;  property: "opacity"; duration: 400}
            PropertyAnimation  { target: yellowLed;  property: "opacity"; duration: 400}
            PropertyAnimation  { target: greenLed;  property: "opacity"; duration: 400}
}

只要當redLed、yellowLed、greenLed中的opacity屬性發生改變時,就會產生一個400ms的過渡影片.

最終效果如下所示:

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/285515.html

標籤：C++

上一篇：三種單例模式的實作（C++）

下一篇：介面類使用的一些準則