详解Qt中的状态机机制

详解Qt中的状态机机制（一）

*****************************************************************************

欢迎访问我的博客:/u010977122/article/details/52959098

****************************************************************************

状态机，简写为FSM（Finite State Machine），状态机由状态寄存器和组合逻辑电路构成，能够根据控制信号按照预先设定的状态进行状态转移，是协调相关信号动作、完成特定操作的控制中心。

在GUI开发的时候，界面复杂的逻辑往往令人抓狂，逻辑都不清晰，代码写起来更加费劲。用户界面设计中采用状态驱动，就可以使得GUI 的逻辑更加清晰。根据当前状态的不同，显示不同的界面。程序界面可以被看作显示对应不同场景，或者是通过改变外观响应用户的交互。通常情况下，界面中很多个组件的改变是并发进行的，这样的界面可以看作从一个状态改变到另外一个状态。

今天我们来看看qt中的状态机框架，qt把它作为QtCore中的一个模块，也足见其重要性：

Qt状态机框架提供了一些类来创建执行状态图，状态图为一个系统如何对外界激励进行反应提供了一个图形化模型，该模型是通过定义一些系统可能进入的状态以及系统怎样从一个状态切换到另一个状态来实现的。事件驱动的系统的一个关键特性就是它的行为不总是仅仅依赖

于前一个或者当前的事件，而且也依赖于将要执行的事件。通过使用状态图，这些信息会非常容易进行表达。状态机框架提供了一套API以及一种执行模型，可以有效地将状态图的元素和语义嵌入到Qt应用程序中。该框架与Qt的元对象系统结合紧密：例如，不同状态之间的转化可由信号触发，信号驱动，且状态可配置用于QObject的属性和方法。

在进入今天的主题之前，我们先来了解三个概念：

状态（State）：是静态的东西，对一系列对象属性的一组静态描述和配置。

过渡（Transition）：是一段时间或者空间的描述，状态之间切换的整个过程，或者描述的是不同属性值之间变化的一个过程。

动画（Animation）：是动态的一个东西，可以看作是过渡的执行者，通过在属性值上应用动画类型来创建。动画类型会对属性值进行插值，从而创建出平滑的过渡效果。要创建动画，需要为某个属性使用恰当的动画类型；应用的动画也依赖于需要实现的行为类型。

这三者之间的联系较为密切，只定义了状态，它是一个死（静态）的东西，所以就需要过渡，来让它活起来。但是过渡这个过程是如何实现，就需要动画来执行，从而让过的的平滑，给用户良好的视觉效果。

在Qt中，这三者之间的关系有没有那么明确，但是明确这三个概念，对于我们理解qt中的状态机制会有很大的帮助。

一、状态

对于初学者来说，我建议从qml中去学习了解状态机的概念会更快。它描述性的语言，会让人很快的去接受这些概念和使用。在你了解了qml中状态机的使用后，再来了解qt中的状态机就会发现很简单。今天我们就先从qml中了解一些状态机的魅力。

在qml中，继承自Item的控件都会有一个states属性，该属性有用户自定义的属性组组成。可以通过PropertyChanges、ParentChange、StateChangeScript、 AnchorChanges这些控件对这个状态中的属性做定义和描述。下面是一个简单的代码示例：

[javascript]view plain copy

1.import QtQuick

2.0

2.

3.

4.Rectangle {

5. id: root

6. width: 100; height: 100

7.

8.

9. states: [

10. State {

11. name: "red_color"

12. PropertyChanges { target: root; color: "red" }

13. },

14. State {

15. name: "blue_color"

16. PropertyChanges { target: root; color: "blue" }

17. }

18. ]

19.}

二、渐变

在状态改变的过程中，我们可以指定一个过渡，可以采用Transition 、Behavior这两个控件，可以在这个过渡中指定各种动画，从而达到想要的交互效果。

[javascript]view plain copy

1.import QtQuick

2.0

2.

3.Rectangle {

4. id: rect

5. width: 100; height: 100

6. color: "red"

7.

8. MouseArea {

9. id: mouseArea

10. anchors.fill: parent

11. }

12.

13. states: State {

14. name: "moved"; when: mouseArea.pressed

15. PropertyChanges { target: rect; x: 50; y: 50 }

16. }

17.

18. transitions: Transition {

19. NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }

20. }

21.}

这个小示例借助Item的transitions属性，qt帮助文档上的描述，This property holds the list of transitions for this item. These define the transitions to be applied to the item whenever it changes its state.，只有在状态属性发生改变，才会触发这个渐变，再运用NumberAnimation，完成这个渐变。

[javascript]view plain copy

1.import QtQuick

2.0

2.

3.Rectangle {

4. width: 400

5. height: 400

6.

7. Rectangle {

8. id: coloredRect

9. width: 100

10. height: 100

11. anchors.centerIn: parent

12.