QtQuick 基础教程 第三课: QML State状态与Transition变换

State QML 类型

所有项目都有一个默认状态,用于定义对象和属性值的默认配置。可以通过将State项添加到states属性定义新状态，以允许项在不同配置之间切换。

特性:

/* 
此属性包含要应用于此状态的更改，
默认情况下，这些更改是针对默认状态应用的。
如果该状态扩展了另一个状态，则对正在扩展的状态应用更改。
*/
changes: list<Change>
/*
此属性保存此状态扩展的状态。
当一个状态扩展另外一个状态时，它会继承该状态的所有更改。
对于扩展状态指定的更改，正在扩展的状态被视为基本状态。
*/
extend: string
/*
此属性保存状态的名称。
每个状态在其项目中都应该有一个唯一的名称。
*/ 
name: string
/*
当状态应该被应用时，这个属性成立。
如果组中的多个状态具有when同时评估为的true则将应用第一个匹配的状态。
*/
when: bool

案例

import QtQuick 2.12

Rectangle {
  id: root 
  width: 100
  height: 100
  color: "gray"
  
  MouseArea {
    id: mousearea 
    anchors.fill: parent 
    onClicked: {
      root.state == 'clicked' ? root.state = "" : root.state = 'clicked';
    }
    
  }
  
  states: [
    State {
      name: "clicked"
      PropertyChanges { target: root; color: "red" }
    }
  ]
}

注意: 默认状态是使用空字符串("")引用的。

状态通常与Transitions一起使用,以在发生状态更改时提供动画。

注意: 不允许从同一对象的另一个状态中设置对象的状态。

Transition 过渡

Transition 定义了当State发生变化时要应用的动画。

特性:

// 此属性包含要转换运行的动画列表
animations: list<Animation>
// 此属性保存从from状态到to状态时是否运行Transition,默认为启用转换
enabled: bool

from: string
// 此属性保存在反转触发此转换的条件时是否应自动反转转换。默认值为假。
reversible: bool
// 此属性保存转换当前是否正在运行。
running: bool
to: string

案例:

import QtQuick 2.12

Rectangle {
  id: root 
  width: 100
  height: 100
  color: "gray"
  
  MouseArea {
    id: mousearea 
    anchors.fill: parent 
    onClicked: {
      root.state == 'clicked' ? root.state = "" : root.state = 'clicked';
    }
    
  }
  
  states: [
    State {
      name: "clicked"
      PropertyChanges { target: root; color: "red" }
    }
  ]
  
  transitions: Transition {
    ColorAnimation { 
        duration: 500;
        easing.type: Easing.OutInQuad;    
     }
  }
}