Qt使用教程之使用Qt Quick UI表單（二）

<Qt Enterprise最新版下載>

建立UI表單主視圖

應用程序的主視圖在一個表視圖中顯示一個客戶列表，並在表視圖中選中有關客戶的詳細信息。

建立主視圖：

1. 在Projects view (1)中，雙擊MainForm.ui.qml文件在Qt Quick Designer中打開它。

2. 在Navigator (2)中，選擇RowLayout並使用Delete鍵來刪除它。

3. 在Library > QML Types (3)中，選擇SplitView並將其拖動到導航器的Item中。

4. 在導航器中選擇split視圖，在Properties (4)中選擇Layout標籤，而後單擊Fill to Parent按鈕來錨定split視圖到項目中。

5. 從庫中拖動TableView和Tab View到導航器的split視圖中。

6. 在導航器中選擇Export按妞導出表視圖做爲屬性。

7. 右鍵單擊TabView打開上下文菜單，並選擇Add Tab建立一個標籤元素。Qt Creator建立一個元素做爲單獨的QML文件，您能夠在對話框中輸入它的名稱。默認狀況下，該元素被命名爲Tab。

8. 在導航器中選擇標籤，而且在屬性中輸入Customer Settings到Title字段中。

9. 按Ctrl+ C將標籤複製到剪貼板，您能夠Ctrl+V兩次來建立兩個標籤並將其命名爲Customer Notes和Customer History。Qt Creator使用MainForm.ui.qml文件中的Tab類型，您將爲之後的標籤內容建立單獨的UI表單。

編輯表視圖

Qt Quick Designer不支持添加列TableView類型，所以您必須使用代碼編輯器添加它們。想要在Edit模式下保持編輯MainForm.ui.qml文件的最小值，移動TableView類型到一個單獨的被命名爲CustomerTableView.qml的QML文件中：

1. 單擊Edit在Edit模式下打開MainForm.ui.qml。

2. 移動TableView類型到一個單獨的QML文件中，右鍵單擊它並選擇 Refactoring > Move Component into Separate File。

3. Qt Creator從CustomerTableView.qml示例文件中添加代碼到文件中。

有興趣的朋友能夠點擊查看更多有關Qt的文章！