商城网站定制建设价位证件制作
状态机在QT中是一个很重要的概念，部件可以通过状态去处理相应的操作！
举个例子，以前的做法是，鼠标点击一个矩形，通过获取到鼠标按下状态后，在槽函数中处理相应操作，而这些操作是放在鼠标事件槽函数中处理的，不是很好；
使用状态机的话，可以将这些操作封装在部件本身里面，通过设置不同的状态去处理不同的的事情，很好的避开了耦合性！
一、状态机
在Rectangle中有一个state属性，标识当前部件的状态；
在通过states: [ ] 给部件声明一个一个状态，即可在这些状态内部出处理操作；
例如：
定义了三个状态，分别是，normal,mouse_press,mouse_release
并且在mouse_press状态中处理将颜色设置为red，宽度设置为300;
在mouse_release状态中处理将颜色设置为blue，高度设置为300；
states: [ State { name: "normal" PropertyChanges { target: root color: "black" } }, State { name: "mouse_press" PropertyChanges { target: root color: "red" width: 300 } }, State { name: "mouse_release" PropertyChanges { target: root color: "blue" height: 300 } }
]之后只需要设置部件的 state 矩形即可进去相应的状态；
例如：state = "mouse_press"
可以通过鼠标点击切换状态：
MouseArea { anchors.fill: parent onPressed: { root.state = "mouse_press" } onReleased: { root.state = "mouse_release" }
} 代码：
// 状态机的使用
// 可通过设置相应的状态去调整某些属性值，或者其他操作
Rectangle { id: root width: 200 height: 100 state: "normal" states: [ State { name: "normal" PropertyChanges { target: root color: "black" } }, State { name: "mouse_press" PropertyChanges { target: root color: "red" width: 300 } }, State { name: "mouse_release" PropertyChanges { target: root color: "blue" height: 300 } } ] MouseArea { anchors.fill: parent onPressed: { root.state = "mouse_press" } onReleased: { root.state = "mouse_release" } }
} 运行效果
二、动画
以下介绍项目中比较常用的动画用法！
1. Transition
通过transition可处理状态，根据不同状态切换处理不一样的动画效果；
继续在上面代码中添加如下动画效果代码；
ColorAnimation {target: root // 目标idduration: 1000 // 处理时间为1秒
}
// 颜色切换时的动画效果
transitions: [ Transition { from: "mouse_press" to: "mouse_release" ColorAnimation { target: root duration: 1000 } NumberAnimation { properties: "width" from: 300 // 确保与mouse_press状态的宽度一致 to: 200 // 回到normal状态的宽度或您希望的其他值 duration: 1000 } }, Transition { from: "mouse_release" to: "mouse_press" ColorAnimation { target: root duration: 1000 } NumberAnimation { properties: "height" from: 300 // 或当前width值 to: 100 duration: 1000 } }
] 运行效果
2. PropertyAnimation 与 NumberAnimation
PropertyAnimation 是设置特殊属性，例如color等非数值的属性；
NumberAnimation 是设置数值类属性；
prorerties 设置需要操作的属性名字；
from 设置起始数值
to 设置目标数值
duration 设置处理时常
target 设置处理的目标id
最后通过.start() 方法启动动画；
代码：
// 动画
Rectangle { id: flashingblob width: 100 height: 50 color: "yellow" MouseArea { anchors.fill: parent onClicked: { // 通过start()方法开启动画效果 animateColor.start() animateWidth.start() animateY.start() } } // 属性 // 将颜色设置为绿色，2s PropertyAnimation { id: animateColor target: flashingblob properties: "color" from: "yellow" to: "green" duration: 2000 } // 数值 // 将宽度由100改为300，1s NumberAnimation { id: animateWidth target: flashingblob properties: "width" from: 100 to: 300 duration: 1000 } // 数值 // 将y由10改为100，1s NumberAnimation { id: animateY target: flashingblob properties: "y" from: 10 to: 100 duration: 1000 }
} 运行效果
3. PropertyAnimation
立刻执行的动画
通过后面加上 on 关键字，标记需要处理的属性是什么
PropertyAnimation on x 需要处理的是x属性
to 设置目标数值
duration 设置处理时常
代码：
Rectangle { id: rect width: 100 height: 100 color: "red" PropertyAnimation on x { to: 100 duration: 1000 } PropertyAnimation on height { to: 300 duration: 1000 } PropertyAnimation on color { to: "green" duration: 1000 }
} 运行效果
完！