在Qt Design Studio中可以使用對話框創建應用軟件UI的動態行為。在該工具中，有兩種方式創建應用軟件動態行為：

（1）使用Connections視圖創建連接、編輯連接。

（2）使用States視圖創建狀態。

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

一、使用Connections視圖創建連接

（1-1）關聯信號和信號處理程序

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

如果以代碼的方式創建組件、信號和信號處理程序之間的連接，參見《QML信號和事件處理機制》；本文主要是使用Qt Design Studio圖形界面來創建。

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

調出后，Connections視圖如下圖所示：

按照如下步驟關聯組件的信號和信號處理程序：

（1）轉到Connections視圖中的Connections選項卡。

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

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

（4）雙擊『Signal Handler』列中的值，從組件可用的所有信號列表中選擇連接將監聽的信號。

（5）雙擊『Actions』列中的值，設計當發出信號時要執行的操作（此處可以使用JavaScript來指定操作）。可以右鍵單擊一個連接，并在上下文菜單中選擇『Open connection Editor』，可以在connection Editor中編輯該連接：

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

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

（2）在Signal字段中，選擇要處理的信號：

（3）可以選擇單選按鈕以篩選列表，只顯示經常使用的信號或屬性更改。

（4）點擊OK

在實際設計中，我們可以使用連接編輯器為Action和Assignment創建JavaScript表達式。Action選項用于將組件連接到信號，Assignment選項用于從另一個組件中獲取屬性值。

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

在上述文中，描述了如何在Qt Design Studio中創建組件之間的信號和信號處理程序之間的連接。本小節將描述在Qt Design Studio中如何設置屬性綁定。

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

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

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

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

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

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

（1-3）指定動態屬性

每個預設組件都有一組預設的屬性，當然我們也可以添加特定組件類型或自定義組件的自定義屬性。

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

在QML組件設計中，任何數據驅動的內容都應該作為相關組件的公共屬性(別名屬性)導出。

在Qt Design Studio中我們可以在Connections視圖下『Properties』一欄指定組件的動態屬性：

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

（2）雙擊『Property』列中的值，為屬性定義一個名稱。屬性名稱必須以小寫字母開頭，且只能包含字母、數字和下劃線。JavaScript保留字不是有效的屬性名。

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

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

我們可以右鍵單擊一個屬性，并在上下文菜單中選擇『Open Binding Editor』，將該屬性的值綁定到另一個屬性的值，或者綁定到在應用程序中可以訪問的數據：

注：我們在Navigator或2D視圖中選中組件時，為組件添加的屬性將顯示在『Properties』視圖中。

二、使用States視圖設計狀態

在QML中，所有Item都有一個默認狀態，用于定義對象和屬性值的默認配置。我們可以通過向states屬性添加State項來定義新的狀態，用于Item在不同的配置之間切換。

例如，如果要更改一個按鈕的外觀，我們則可以在按鈕組件中定義狀態，用于隱藏按鈕圖片，然后在該位置顯示另一種圖片，或者更改按鈕背景、文本顏色。當在其他組件中使用此按鈕實例時，可以通過隱藏或顯示按鈕組件實例來定義狀態以實現不同的顯示效果。

在Qt Design Studio中，我們在『States』視圖中編輯QML文檔中的狀態：

點擊+號，添加一個新的狀態。單擊新狀態可以在2D視圖下切換到對應的Item下，然后在『properties』中修改組件或組件實例的屬性值。

當添加新的狀態后，可以點擊下圖所示的位置可以設置狀態：

在彈出的上下文菜單中，有幾個選項：

（1）如果需要將某一個狀態設置為應用程序的啟動狀態，就選擇『Set as Default』，當該狀態被設置成默認狀態后，該狀態的右上角會出現“Default”文本標識；如果需要重置狀態，就選擇『reset Default』。

（2）如果需要指定什么時候應用狀態，就選擇『Set when Condition』選項，在Binding Editor中，為狀態指定一個when屬性，把該屬性的值設置為一個布爾表達式（當該表達式的計算結果為true時，則會應用該狀態）：

在『Binding Editor』中組合表達式時，代碼補全特性會列出可以在表達式中使用的組件及其屬性。

總結

本文描述了如何在Qt Design Studio中創建連接和狀態。在Qt Design Studio中使用視圖設置的參數，都會在『Code』視圖中添加對應的QML代碼；反之，如果一個QML文件中已經存在相關的QML代碼了，則會在Qt Design Studio中2D/3D視圖下顯示。

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

本文所述基于Qt Design Studio工具的內容同樣適用于Qt Creator 設計模式下的操作。

使用 Qt Design Studio工具能為我們的開發省去一些代碼編寫工作。在實際開發中，就根據自己的喜愛選擇了。