27.Qt Quick QML-State、Transition

諾謙發表於2021-06-06
QTUI

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

最終效果如下所示:

 

相關文章