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

最終效果如下所示:

 

Tags:

VirMach 便宜 VPS

QNews

QNews