詳解Qt中的狀態(tài)機(jī)機(jī)制一

1、詳解Qt中的狀態(tài)機(jī)機(jī)制（一）*歡迎訪問(wèn)我的博客: *狀態(tài)機(jī)，簡(jiǎn)寫(xiě)為FSM（Finite State Machine），狀態(tài)機(jī)由狀態(tài)寄存器和組合邏輯電路構(gòu)成，能夠根據(jù)控制信號(hào)按照預(yù)先設(shè)定的狀態(tài)進(jìn)行狀態(tài)轉(zhuǎn)移，是協(xié)調(diào)相關(guān)信號(hào)動(dòng)作、完成特定操作的控制中心。 在GUI開(kāi)發(fā)的時(shí)候，界面復(fù)雜的邏輯往往令人抓狂，邏輯都不清晰，代碼寫(xiě)起來(lái)更加費(fèi)勁。用戶界面設(shè)計(jì)中采用狀態(tài)驅(qū)動(dòng)，就可以使得GUI的邏輯更加清晰。根據(jù)當(dāng)前狀態(tài)的不同，顯示不同的界面。程序界面可以被看作顯示對(duì)應(yīng)不同場(chǎng)景，或者是通過(guò)改變外觀響應(yīng)用戶的交互。通常情況下，界面中很多個(gè)組件的改變是并發(fā)進(jìn)行的，這樣的界面可以看作從一個(gè)狀態(tài)改變到另外一個(gè)狀態(tài)。 今天

2、我們來(lái)看看qt中的狀態(tài)機(jī)框架，qt把它作為QtCore中的一個(gè)模塊，也足見(jiàn)其重要性： Qt狀態(tài)機(jī)框架提供了一些類來(lái)創(chuàng)建執(zhí)行狀態(tài)圖，狀態(tài)圖為一個(gè)系統(tǒng)如何對(duì)外界激勵(lì)進(jìn)行反應(yīng)提供了一個(gè)圖形化模型，該模型是通過(guò)定義一些系統(tǒng)可能進(jìn)入的狀態(tài)以及系統(tǒng)怎樣從一個(gè)狀態(tài)切換到另一個(gè)狀態(tài)來(lái)實(shí)現(xiàn)的。事件驅(qū)動(dòng)的系統(tǒng)的一個(gè)關(guān)鍵特性就是它的行為不總是僅僅依賴于前一個(gè)或者當(dāng)前的事件，而且也依賴于將要執(zhí)行的事件。通過(guò)使用狀態(tài)圖，這些信息會(huì)非常容易進(jìn)行表達(dá)。狀態(tài)機(jī)框架提供了一套API以及一種執(zhí)行模型，可以有效地將狀態(tài)圖的元素和語(yǔ)義嵌入到Qt應(yīng)用程序中。該框架與Qt的元對(duì)象系統(tǒng)結(jié)合緊密：例如，不同狀態(tài)之間的轉(zhuǎn)化可由信號(hào)觸發(fā)，信號(hào)驅(qū)

3、動(dòng)，且狀態(tài)可配置用于QObject的屬性和方法。在進(jìn)入今天的主題之前，我們先來(lái)了解三個(gè)概念：狀態(tài)（State）：是靜態(tài)的東西，對(duì)一系列對(duì)象屬性的一組靜態(tài)描述和配置。過(guò)渡（Transition）：是一段時(shí)間或者空間的描述，狀態(tài)之間切換的整個(gè)過(guò)程，或者描述的是不同屬性值之間變化的一個(gè)過(guò)程。動(dòng)畫(huà)（Animation）：是動(dòng)態(tài)的一個(gè)東西，可以看作是過(guò)渡的執(zhí)行者，通過(guò)在屬性值上應(yīng)用動(dòng)畫(huà)類型來(lái)創(chuàng)建。動(dòng)畫(huà)類型會(huì)對(duì)屬性值進(jìn)行插值，從而創(chuàng)建出平滑的過(guò)渡效果。要?jiǎng)?chuàng)建動(dòng)畫(huà)，需要為某個(gè)屬性使用恰當(dāng)?shù)膭?dòng)畫(huà)類型；應(yīng)用的動(dòng)畫(huà)也依賴于需要實(shí)現(xiàn)的行為類型。這三者之間的聯(lián)系較為密切，只定義了狀態(tài)，它是一個(gè)死（靜態(tài)）的東西，所以就

4、需要過(guò)渡，來(lái)讓它活起來(lái)。但是過(guò)渡這個(gè)過(guò)程是如何實(shí)現(xiàn)，就需要?jiǎng)赢?huà)來(lái)執(zhí)行，從而讓過(guò)的的平滑，給用戶良好的視覺(jué)效果。在Qt中，這三者之間的關(guān)系有沒(méi)有那么明確，但是明確這三個(gè)概念，對(duì)于我們理解qt中的狀態(tài)機(jī)制會(huì)有很大的幫助。一、狀態(tài)對(duì)于初學(xué)者來(lái)說(shuō)，我建議從qml中去學(xué)習(xí)了解狀態(tài)機(jī)的概念會(huì)更快。它描述性的語(yǔ)言，會(huì)讓人很快的去接受這些概念和使用。在你了解了qml中狀態(tài)機(jī)的使用后，再來(lái)了解qt中的狀態(tài)機(jī)就會(huì)發(fā)現(xiàn)很簡(jiǎn)單。今天我們就先從qml中了解一些狀態(tài)機(jī)的魅力。在qml中，繼承自Item的控件都會(huì)有一個(gè)states屬性，該屬性有用戶自定義的屬性組組成。可以通過(guò)PropertyChanges、ParentCh

5、ange、StateChangeScript、AnchorChanges這些控件對(duì)這個(gè)狀態(tài)中的屬性做定義和描述。下面是一個(gè)簡(jiǎn)單的代碼示例：javascriptview plaincopy1. importQtQuick2.02. 3. 4. Rectangle5. id:root6. width:100;height:1007. 8. 9. states:10. State11. name:red_color12. PropertyChangestarget:root;color:red13. ,14. State15. name:blue_color16. PropertyChangesta

6、rget:root;color:blue17. 18. 19. 二、漸變?cè)跔顟B(tài)改變的過(guò)程中，我們可以指定一個(gè)過(guò)渡，可以采用Transition 、Behavior這兩個(gè)控件，可以在這個(gè)過(guò)渡中指定各種動(dòng)畫(huà)，從而達(dá)到想要的交互效果。javascriptview plaincopy1. importQtQuick2.02. 3. Rectangle4. id:rect5. width:100;height:1006. color:red7. 8. MouseArea9. id:mouseArea10. anchors.fill:parent11. 12. 13. states:State14. na

7、me:moved;when:mouseArea.pressed15. PropertyChangestarget:rect;x:50;y:5016. 17. 18. transitions:Transition19. NumberAnimationproperties:x,y;easing.type:Easing.InOutQuad20. 21. 這個(gè)小示例借助Item的transitions屬性，qt幫助文檔上的描述，This property holds the list of transitions for this item. These define the transitions

8、to be applied to the item whenever it changes its state.，只有在狀態(tài)屬性發(fā)生改變，才會(huì)觸發(fā)這個(gè)漸變，再運(yùn)用NumberAnimation，完成這個(gè)漸變。javascriptview plaincopy1. importQtQuick2.02. 3. Rectangle4. width:4005. height:4006. 7. Rectangle8. id:coloredRect9. width:10010. height:10011. anchors.centerIn:parent12. 13. color:red14. Behavio

9、roncolor15. ColorAnimation16. 17. 18. MouseArea19. id:mouser20. anchors.fill:parent21. hoverEnabled:true22. 23. 24. states:State25. name:GreenState26. when:mouser.containsMouse27. 28. PropertyChanges29. target:coloredRect30. color:green31. 32. 33. 34. 這串代碼也實(shí)現(xiàn)了狀態(tài)的漸變，區(qū)別在于Behavior這個(gè)控件不僅可以用于狀態(tài)的改變，在沒(méi)有使用狀

10、態(tài)，只要安裝Behavoir監(jiān)控的屬性發(fā)生了改變，就會(huì)運(yùn)用相應(yīng)的動(dòng)畫(huà)平滑的完成這個(gè)漸變，使用起來(lái)相當(dāng)方便。以上的兩部分講的就是狀態(tài)和漸變，借助qml這種描述性語(yǔ)言，我們也可很方便的完成GUI的開(kāi)發(fā)，很容易做出漂亮的效果。在上面的實(shí)例中，大家發(fā)現(xiàn)也有很多動(dòng)畫(huà)，所以說(shuō)，狀態(tài)、漸變、動(dòng)畫(huà)三者關(guān)系是很密切的，下面，我們來(lái)看看動(dòng)畫(huà)。三、動(dòng)畫(huà)上面的圖是qtquick中的所有用到的動(dòng)畫(huà)的一個(gè)關(guān)系圖，他們都繼承自Animation這個(gè)最基礎(chǔ)的控件，這個(gè)控件提供了動(dòng)畫(huà)的控制，開(kāi)始，暫停，重播，播放次數(shù)。此外它還提供了兩個(gè)信號(hào)，started（） 和 stopped（），以供其他控件去捕捉該信號(hào)去響應(yīng)其他的槽函數(shù)。在平時(shí)開(kāi)發(fā)中運(yùn)用較多的是PropertyAnimation這個(gè)控件。Qt系統(tǒng)中強(qiáng)大的元對(duì)象系統(tǒng)，使得對(duì)屬性的操作很方便，所以這個(gè)PropertyAnimation就可以對(duì)這些屬性做動(dòng)畫(huà)。而且它還帶Easing Curve緩和曲線，qt中提供了四十多種緩和曲線，讓開(kāi)發(fā)者更方便的定義動(dòng)畫(huà)的效果。此外還有ParallelAnimation 、SequentialAnimation 這兩個(gè)控件，一個(gè)是平行動(dòng)畫(huà)組，一個(gè)是串行動(dòng)畫(huà)組，這兩個(gè)又可以相互的嵌套，使用非常的方便。在使用的時(shí)候，可能又會(huì)遇到想要在兩個(gè)動(dòng)