QML中state元素与transition的使用个人体会

这两个元素的使用，因为我之前也是照猫画虎的按照别人的实例来一点点修改达到自己的想要目的就行了，没有太多的关注过具体细节问题。直到最近因为要写不少界面效果，所以用的多了，自然体会也就稍多了点！下面是个人对这两个元素的使用体会，希望对读者有一点帮助吧！

 

1、首先是各自的定义

state就是定义一个状态，包含的属性有这个状态的名字name，以及一些在这个状态下的一些目标对象的相关状态（具体参见下文使用示例）。

transition定义过渡的动画，就是从（from）一个状态到（to）另一个状态的过渡动画。

 

简单的说就，在state中定义了Item（或者Rectangle等）要是处于这个状态下的话用户希望的一些属性（坐标、翻转、透明度等等）效果，而transition里面给出了从一个状态到另一个状态这些属性变更的时候需要经历多长时间（duration），以及属性值的变化过渡类型（easing.type）。

 

2、好了，看使用示例！

2.1 state和states以及State的使用

一个Item（或Rectangle等，下面一律用Item代替）中有state属性和states属性，state属性指明了当前的状态，后面的值是状态名（字符串）。而states加了s显然表示复数，就是多个State的集合。

state通过使用：

state: "name1"

states的使用可以是：

states:
[

State {

name: "name1"

PropertyChanges { ...  }

},

State {

name: "name2"

PropertyChanges { ... }

}

]

来声明多个State，也可以是

states:State{

name: "name1"

PropertyChanges {  ....}

}

来声明一个State。

注意：多个State之间用“,”逗号来进行分隔！

 

2.2 Transition和transitions的使用！

Item的属性里面有transitions，而这就是一个Transititon的集合，使用类似于states，可以声明多个也可以声明一个。

transitions:
[

Transition{

from: "*";  to: "name1"

NumberAnimation { ...}

},

Transition {

from: "name1";  to: "name2"

SequentialAnimation{

NumberAnimation { ... }

...

}

}

]

 

3、进阶

下面才是重点！

3.1 state中的when属性

在State中，每一个State除了有name以外，还可以有这个state触发的时机（when）。就是说，Item切换到一个State可以是在某个处理函数中（例如鼠标单击onClick{}中）通过直接给itemObj.state="name1"赋值，来使Item进入到指定的状态中，也可以通过when属性来指定。when后面的值是一个触发时机，可以是某个变量为true的时候触发，也可以是when：listview.moving（即listview移动的时候）等等，根据自己的需要来指定State的触发时机。

3.2 state中的各种change变化

3.2.1 PropertyChange

PropertyChange指定了属性的变化，一般是指定当前的Item的某个属性的变化，例如

PropertyChanges{target:main;scale:1.0}

通过这句话指定main对象的scale（比例）为1.0，通过target来绑定需要更改的对象，然后后面直接用<属性：属性值>这种方式就可以完成属性的更改。

 

对于PropertyChange一种使用方法就是，它不仅仅是简单地修改某个可以显示的Item的某个属性，也可以是别的什么的对象的属性。例如，

在前面声明了一个鼠标区域对象

MouseArea{

   id: mouseArea

}

然后在这个PropertyChange中同样可以对mouseArea的属性进行修改，如

PropertyChanges{target:mouseArea;   onClick:{.....dosomething.....}}

 

一个PropertyChange里面不止可以像上面的声明一个属性的变化，同时可以指定多个这个对象的属性变化。

 

3.2.2 ParentChange和AnchorChange

这两个，目前来说我用的比较少，从Qt自己的文档里看到主要就是一个是更改对象的parent；一个是更改对象的对齐（Anchor）方式。

 

3.2.3 StateChangeScript

这个主要是可以声明进入这个状态里面的执行脚本，属性有这一段脚本的名字name和脚本具体内容script。

State {
name: "state1"
StateChangeScript {
name: "myScript"
script: ...do somethin....
}
// ...
}

而在使用的时候，只需要在transition中通过ScriptAction来使用这段脚本。

 

Transition {
to: "state1"
ScriptAction { scriptName: "myScript" }
}

这个属性的使用非常重要，如下文中说的，ScriptAction中也可以使用script脚本，为什么不直接在这里把脚本写进去呢？

通过我的个人使用经历来看，在Transition中的ScriptAction是可以执行脚本，但是这个脚本中对于某些状态的修改（例如，另某个loader的source为空）只在触发这个Transition动作的state中存在，而一旦切换状态之后，修改就不会存在（loader的source又不为空了）。

API文档中关于StateChangeScript的介绍：A StateChangeScript is run upon entering a state. 

 

3.3 Transition属性中的各种Animation

这个里面有好多好多过渡动画，我目前也就使用了一部分，所以有些地方讲的不够详细，等以后使用过了再来细说。

3.3.1 NumberAnimation

这是个数字数值变化效果，例如指定某个Item的宽度width由（from）100变化到（to）200，而这个过渡可以让其用1s的时间慢慢变化（duration: 1000），而这个数值的变化是匀速变化（easing.type:Easing.Linear）还是别的有弹跳效果的（easing.type:Easing.OutQuad）等等。

使用可以是：

NumberAnimation{target:item;property:"scale";
duration:400;easing.type:Easing.Linear;}

也可以是：

NumberAnimation{target:item;property:"width";
duration:400;from:100;to:400;
easing.type:Easing.OutQuad;}

等等。 

3.3.2 ColorAnimation

 定义color的变化，如下

states:
State{

name: "active"; when: container.activeFocus

PropertyChanges {   target: containerbg;  color: "#104E8B";  }

}

transitions:
Transition
{

from: "*"; to: "active"

ColorAnimation { from: "transparent"; to: "#104E8B"; duration: 300 }

}

指定状态变化到"active"的时候，颜色的过渡（渐变）时间为300毫秒。

注，这里的from:"*";
星号是个通配符，代表任何状态。

 

3.3.3 ScriptAction

用于指定脚本信息，

ScriptAction
{ script: console.log("here")}，这种用法主要是直接在此处加入脚本，也可以按照上面的StateChangeScript来使用。

 

3.3.4 SequentialAnimation

指定各种变化按顺序执行。

Transition
{

from: "*";    to: "close";

SequentialAnimation{

NumberAnimation {   ...  }

ScriptAction    {   ...  }

}

}

 

3.3.5 ParallelAnimation{}

指定各种Animation动作并行执行，这个和上面的顺序执行可以相互嵌套使用，从而设计出一种复杂的动作序列。

 

好了，先写到这，以后再慢慢补充！！ 

（未完待续）