在Qt Design Studio中可以使用對(duì)話(huà)框創(chuàng)建應(yīng)用軟件UI的動(dòng)態(tài)行為。在該工具中，有兩種方式創(chuàng)建應(yīng)用軟件動(dòng)態(tài)行為：

（1）使用Connections視圖創(chuàng)建連接、編輯連接。

（2）使用States視圖創(chuàng)建狀態(tài)。

下文將分別描述這兩種方式。

一、使用Connections視圖創(chuàng)建連接

（1-1）關(guān)聯(lián)信號(hào)和信號(hào)處理程序

我們可以在UI組件和應(yīng)用程序之間創(chuàng)建連接，使它們能夠相互通信。

如果以代碼的方式創(chuàng)建組件、信號(hào)和信號(hào)處理程序之間的連接，參見(jiàn)《QML信號(hào)和事件處理機(jī)制》；本文主要是使用Qt Design Studio圖形界面來(lái)創(chuàng)建。

首先找到Qt Design Studio的Connections編輯視圖，如果界面中沒(méi)該視圖，需要從下圖所示的地方調(diào)出Connections編輯視圖：

調(diào)出后，Connections視圖如下圖所示：

按照如下步驟關(guān)聯(lián)組件的信號(hào)和信號(hào)處理程序：

（1）轉(zhuǎn)到Connections視圖中的Connections選項(xiàng)卡。

（2）選擇+（Add）按鈕添加一個(gè)連接。

（3）雙擊『Target』列中的值，選擇添加連接到信號(hào)的組件。

（4）雙擊『Signal Handler』列中的值，從組件可用的所有信號(hào)列表中選擇連接將監(jiān)聽(tīng)的信號(hào)。

（5）雙擊『Actions』列中的值，設(shè)計(jì)當(dāng)發(fā)出信號(hào)時(shí)要執(zhí)行的操作（此處可以使用JavaScript來(lái)指定操作）?？梢杂益I單擊一個(gè)連接，并在上下文菜單中選擇『Open connection Editor』，可以在connection Editor中編輯該連接：

如果需要的信號(hào)處理程序沒(méi)有列在『Signal Handler』列中，我們可以按照以下步驟添加：

（1）右鍵單擊Navigator或2D視圖中的組件，然后在上下文菜單中選擇『Add New Signal Handler』：

（2）在Signal字段中，選擇要處理的信號(hào)：

（3）可以選擇單選按鈕以篩選列表，只顯示經(jīng)常使用的信號(hào)或?qū)傩愿摹?/p>

（4）點(diǎn)擊OK

在實(shí)際設(shè)計(jì)中，我們可以使用連接編輯器為Action和Assignment創(chuàng)建JavaScript表達(dá)式。Action選項(xiàng)用于將組件連接到信號(hào)，Assignment選項(xiàng)用于從另一個(gè)組件中獲取屬性值。

（1-2）在Qt Design Studio中設(shè)置屬性綁定

在上述文中，描述了如何在Qt Design Studio中創(chuàng)建組件之間的信號(hào)和信號(hào)處理程序之間的連接。本小節(jié)將描述在Qt Design Studio中如何設(shè)置屬性綁定。

屬性綁定與設(shè)置信號(hào)和信號(hào)處理程序差不多是一樣的，在Connections視圖中，我們選擇『Binding』一欄：

（1）選擇+(Add)按鈕，為當(dāng)前選擇的組件添加綁定。『Item』列顯示組件ID。

（2）雙擊『Property』列中的值，選擇要綁定到源屬性的屬性。

（3）雙擊『Source Item』列中的值，選擇要使用的組件。

（4）雙擊『Source Property』列中的值，選擇要將目標(biāo)屬性綁定到的屬性。

我們還可以右鍵單擊綁定，然后在上下文菜單中選擇『Open binding Editor』，可以在binding Editor中設(shè)置綁定的JavaScript表達(dá)式：

（1-3）指定動(dòng)態(tài)屬性

每個(gè)預(yù)設(shè)組件都有一組預(yù)設(shè)的屬性，當(dāng)然我們也可以添加特定組件類(lèi)型或自定義組件的自定義屬性。

可以將組件的屬性綁定到動(dòng)態(tài)表達(dá)式，從而為組件定義可被其他組件讀取的全局屬性。例如，可以為根組件指定可以在子組件中使用的全局屬性。

在QML組件設(shè)計(jì)中，任何數(shù)據(jù)驅(qū)動(dòng)的內(nèi)容都應(yīng)該作為相關(guān)組件的公共屬性(別名屬性)導(dǎo)出。

在Qt Design Studio中我們可以在Connections視圖下『Properties』一欄指定組件的動(dòng)態(tài)屬性：

（1）選擇+(Add)按鈕，為當(dāng)前選擇的組件添加動(dòng)態(tài)屬性。『Item』列顯示組件ID。

（2）雙擊『Property』列中的值，為屬性定義一個(gè)名稱(chēng)。屬性名稱(chēng)必須以小寫(xiě)字母開(kāi)頭，且只能包含字母、數(shù)字和下劃線(xiàn)。JavaScript保留字不是有效的屬性名。

（3）雙擊『Property Type 』列中的值指定屬性類(lèi)型。

（4）雙擊『Property Value』列中的值指定屬性值。

我們可以右鍵單擊一個(gè)屬性，并在上下文菜單中選擇『Open Binding Editor』，將該屬性的值綁定到另一個(gè)屬性的值，或者綁定到在應(yīng)用程序中可以訪(fǎng)問(wèn)的數(shù)據(jù)：

注：我們?cè)?code style="font-size:14px;padding:2px 4px;margin-right:2px;margin-left:2px;background-color:rgba(27,31,35,.05);font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(239,112,96);">Navigator或2D視圖中選中組件時(shí)，為組件添加的屬性將顯示在『Properties』視圖中。

二、使用States視圖設(shè)計(jì)狀態(tài)

在QML中，所有Item都有一個(gè)默認(rèn)狀態(tài)，用于定義對(duì)象和屬性值的默認(rèn)配置。我們可以通過(guò)向states屬性添加State項(xiàng)來(lái)定義新的狀態(tài)，用于Item在不同的配置之間切換。

例如，如果要更改一個(gè)按鈕的外觀，我們則可以在按鈕組件中定義狀態(tài)，用于隱藏按鈕圖片，然后在該位置顯示另一種圖片，或者更改按鈕背景、文本顏色。當(dāng)在其他組件中使用此按鈕實(shí)例時(shí)，可以通過(guò)隱藏或顯示按鈕組件實(shí)例來(lái)定義狀態(tài)以實(shí)現(xiàn)不同的顯示效果。

在Qt Design Studio中，我們?cè)凇篠tates』視圖中編輯QML文檔中的狀態(tài)：

點(diǎn)擊+號(hào)，添加一個(gè)新的狀態(tài)。單擊新?tīng)顟B(tài)可以在2D視圖下切換到對(duì)應(yīng)的Item下，然后在『properties』中修改組件或組件實(shí)例的屬性值。

當(dāng)添加新的狀態(tài)后，可以點(diǎn)擊下圖所示的位置可以設(shè)置狀態(tài)：

在彈出的上下文菜單中，有幾個(gè)選項(xiàng)：

（1）如果需要將某一個(gè)狀態(tài)設(shè)置為應(yīng)用程序的啟動(dòng)狀態(tài)，就選擇『Set as Default』，當(dāng)該狀態(tài)被設(shè)置成默認(rèn)狀態(tài)后，該狀態(tài)的右上角會(huì)出現(xiàn)“Default”文本標(biāo)識(shí)；如果需要重置狀態(tài)，就選擇『reset Default』。

（2）如果需要指定什么時(shí)候應(yīng)用狀態(tài)，就選擇『Set when Condition』選項(xiàng)，在Binding Editor中，為狀態(tài)指定一個(gè)when屬性，把該屬性的值設(shè)置為一個(gè)布爾表達(dá)式（當(dāng)該表達(dá)式的計(jì)算結(jié)果為true時(shí)，則會(huì)應(yīng)用該狀態(tài)）：

在『Binding Editor』中組合表達(dá)式時(shí)，代碼補(bǔ)全特性會(huì)列出可以在表達(dá)式中使用的組件及其屬性。

總結(jié)

本文描述了如何在Qt Design Studio中創(chuàng)建連接和狀態(tài)。在Qt Design Studio中使用視圖設(shè)置的參數(shù)，都會(huì)在『Code』視圖中添加對(duì)應(yīng)的QML代碼；反之，如果一個(gè)QML文件中已經(jīng)存在相關(guān)的QML代碼了，則會(huì)在Qt Design Studio中2D/3D視圖下顯示。

如果QML文檔中存在錯(cuò)誤或者存在Qt Design Studio不能識(shí)別的代碼塊時(shí)，Qt Design Studio將不能在對(duì)應(yīng)的視圖中正確顯示。所以在QML中，存在一種UI文件(文件后綴為：.ui.qml)，該文件只用于在Qt Design Studio中編輯。

本文所述基于Qt Design Studio工具的內(nèi)容同樣適用于Qt Creator 設(shè)計(jì)模式下的操作。

使用 Qt Design Studio工具能為我們的開(kāi)發(fā)省去一些代碼編寫(xiě)工作。在實(shí)際開(kāi)發(fā)中，就根據(jù)自己的喜愛(ài)選擇了。