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: [