State與Transition之State

Item的state和states屬性

所有Item都有個state屬性，保存着當前狀態的名字，默認值是空字符串（默認狀態）
所有Item都有個states 屬性，保存着當前Item的所有狀態，類型是list < State >

State QML Type

Properties

• changes : list< Change >//狀態的所有變化
• extend : string//指向當前狀態基態的名字，基態的所有變化都會被繼承
• name : string//狀態名字
• when : bool //爲true，應用該狀態（置當前Item的state置爲該狀態名），爲false切換到默認狀態。當多個State的when爲true時，第一個State生效（變爲fasle時切換到下一個State爲true的，沒有切換到默認狀態）。
  應用狀態兩種方式：1設置Item的state（對應的狀態when爲false不會生效）2設置when爲true（使用when時必須是綁定到表達式上。）

changes : list< Change >

• PropertyChanges 改變屬性
• AnchorChanges 改變錨
• ParentChange 改變父項目
• StateChangeScript 運行腳本
• StateGroup

PropertyChanges

  import QtQuick 2.0

  Item {
      id: container
      width: 300; height: 300

      Rectangle {
          id: rect
          width: 100; height: 100
          color: "red"

          MouseArea {
             id: mouseArea
             anchors.fill: parent
          }

          states: State {
             name: "resized"; when: mouseArea.pressed
             PropertyChanges { target: rect; color: "blue"; height: container.height }
          }
      }
  }

AnchorChanges

 import QtQuick 2.0

  Rectangle {
      id: window
      width: 120; height: 120
      color: "black"

      Rectangle { id: myRect; width: 50; height: 50; color: "red" }

      states: State {
          name: "reanchored"

          AnchorChanges {
              target: myRect
              anchors.top: window.top
              anchors.bottom: window.bottom
          }
          PropertyChanges {
              target: myRect
              anchors.topMargin: 10
              anchors.bottomMargin: 10
          }
      }

      MouseArea { anchors.fill: parent; onClicked: window.state = "reanchored" }
  }

ParentChange

  import QtQuick 2.0

  Item {
      width: 200; height: 100

      Rectangle {
          id: redRect
          width: 100; height: 100
          color: "red"
      }

      Rectangle {
          id: blueRect
          x: redRect.width
          width: 50; height: 50
          color: "blue"

          states: State {
              name: "reparented"
              ParentChange { target: blueRect; parent: redRect; x: 10; y: 10 }
          }

          MouseArea { anchors.fill: parent; onClicked: blueRect.state = "reparented" }
      }
  }

StateChangeScript

  State {
      name: "state1"
      StateChangeScript {
          name: "myScript"
          script: doStateStuff();
      }
      // ...
  }

相關鏈接
Qt Quick States