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