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

 

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的過渡動畫.

最終效果以下所示: