## 8.4 使用 Qt Designer 創建主窗口 通過對第 5 章的學習，我們已經了解了 Qt Designer 及其組件的基本用法。Qt Designer 提供了許多預定義模板，使用它可以創建多種不同的用戶界面。使用 Qt Designer 創建主窗口是非常快捷的，使用其中的 【templates\forms】→【Main Window】就可以完成主窗口類型應用程序界面的設計，主要包括菜單欄、工具欄以及錨接窗口部件的 設定，這其中錨接窗口部件不是必需的。 小貼士：在 Qt4.5 以前的版本中，使用 Qt Designer 不能創建狀態欄和錨接窗口部件(Dock Widget)，必須使用手寫代碼實現；而在 Qt4.5 以后，可以在圖形界面下創建錨接窗口部件 了，但狀態欄還是需要結合手寫代碼創建。 好了，下面就給出一個完整的創建主窗口應用程序界面的圖文流程，示范的環境是在 Windows XP SP2 中文版，Qt4.5.2 開源版下。你在其它操作系統如 Linux 以及 Mac OS X 下 的步驟與此類似，只是軟件展現的界面風格有所不同。 ### 8.4.1 創建菜單 在一個大型的應用程序中，菜單往往是不可或缺的，它為客戶提供了簡便快捷的操作模式。菜單有兩種：主菜單和上下文菜單。主菜單的位置是固定的，即在應用程序主界面的頂部；上下文菜單一般在用戶單擊鼠標右鍵時出現在鼠標的位置，應用更加靈活方便。 第 1 步，選擇 Main Window 模板 依次點擊 Qt Designer 主菜單上的【文件】→【新建】，彈出如圖 8-3 所示的【新建 窗體】對話框，在其中選擇【templates\forms】→【Main Window】模板，然后點擊【創 建】按鈕，即生成一個默認的主窗口界面，如圖 8-4 所示。  圖 8-3 選擇 Main Window 模板  圖 8-4 創建了一個空白主窗口界面 在這個系統默認生成的界面上，已經包含了一個菜單欄和一個狀態欄，以及一個中心 窗口部件，我們可以從如圖 8-5 所示的對象查看器中看得非常清楚。  圖 8-5 從對象查看器中看到的界面組成情況 菜單欄是可以被移除的，如圖 8-6 所示，方法是在菜單欄上面點擊鼠標右鍵，彈出上 下文菜單，選擇【移除菜單欄】即可完成移除；再次創建菜單欄也很容易，在窗體上點擊鼠 標右鍵，在彈出的上下文菜單上選擇 【創建菜單欄】命令，即可增加一個新的菜單欄，如圖 8-7 所示。狀態欄的移除和創建與此相類似，只是狀態欄并不可以在界面上編輯，而只能在 屬性編輯器中設定屬性，在對象觀察器中也可設置其名字等基本屬性。  圖 8-6 移除菜單欄  圖 8-7 再次創建菜單欄 小貼士：根據 Qt Assistant 中的說法，這個界面默認包含了一個菜單欄和一個工具欄，原文如下：This template provides a main application window containing a menu bar and a toolbar by default -- these can be removed if they are not required. 這是與實際情況不符的，希望讀者朋友注意。 一個 Qt 應用程序通常只有一個菜單欄和狀態欄，但可以有多個工具欄以及錨接窗口部 件。 第 2 步，創建菜單項。 首先設計主菜單。 在主窗口上用鼠標左鍵雙擊【在這里輸入】區域，在出現的文本框中輸入第一個菜單的名字“&File”，并按下【Enter】鍵或【Return】鍵確認輸入。其中“&”表示把字符 F作為菜單顯示文本助記符（在字母 F 下加下劃線，即顯示為“File”），作用是將 “Alt+F”設置為加速鍵（accelerator）。當應用程序處在活動狀態時，通過按下加速鍵“Alt+F”，就可以將【File】菜單激活；或者主窗口的菜單欄處在活動的狀態下（通過按下”Alt”鍵就可以將菜單欄激活），在鍵盤上直接按下 “F”鍵就可以激活【File】菜 單，如圖 8-8 所示。這之后，依次建立【Edit】、【Help】等其它主菜單項。  圖 8-8 創建主菜單 你也可以在菜單項中輸入中文名稱，如 “文件”、“編輯”、“幫助”等，但我們不 推薦直接輸入中文字符。輸入中文的常見做法是 在主窗口上用鼠標左鍵雙擊“在這里輸 入”區域，在出現的文本框中輸入第一個菜單的名字 “文件(&F)”，并按下【Enter】鍵或【Return】鍵確認輸入。同上，字母 F 將作為助記符，顯示為“文件(F)”。其他菜單依此 類推。 小貼士：輸入完畢后，一定要按下回車鍵（Enter 或 Return）予以確認，否則剛輸入的字 符將無效。要拒絕輸入的字符，可以按下【Escape】鍵，也可以同時按下“Ctrl+Z”組合鍵取消剛才的輸入。 使用簡單的拖拽方式就可以把主菜單項調整到你希望的位置，當你使用鼠標左鍵拖拽 主菜單項時，一條紅色的豎線會提示出目的位置。 主菜單可以有任意多個菜單項，主菜單項的刪除可以用上下文菜單命令實現，而不可 以使用【Delete】鍵。 然后設計子菜單。 子菜單的設計與主菜單類似,需要說明的是如何設置快捷鍵，這需要借助屬性編輯器來完成，在屬性編輯器中選中要設定的子菜單項，然后點擊 ”shortcut”欄，如圖 8-9 所示，在上面按下你想要加入的快捷鍵，比如 “Ctrl+N”,就同時按下這兩個鍵即可完成設 置。這之后，用同樣的做法完成各個子菜單項的添加。  圖 8-9 設置子菜單項的快捷鍵 子菜單也可以有任意多個或多個級聯菜單項。子菜單項也可以使用拖拽方式到任意一 個主菜單下面，即使是一個已經關閉的主菜單。要刪除子菜單項，可以直接按下 Delete 鍵。 小貼士：創建子菜單的同時，就創建了動作（ Action），這也是創建動作的方法之一。下面 還會講到如何創建動作，并與菜單項進行關聯。 第 3 步，設置屬性 設置屬性可以做到非常的快捷。請看下面的專題介紹。 專題：對象查看器和屬性編輯器的配合使用 首先將對象查看器和屬性編輯器按照如圖 8-10 所示排列，然后在對象查看器中用鼠標 左鍵點擊選中某一個對象，再切換到屬性編輯器里面設置該對象的屬性。 這種方法的好處是，不必在界面上費力氣的逐個點擊對象，再設置屬性；而且有些對 象是不能通過鼠標點擊獲得焦點并設置屬性的，如 Status Bar 等。  圖 8-10 組合使用對象查看器和屬性編輯器 ### 8.4.2創建動作 當菜單欄和工具欄被創建好之后，它們還不能夠被使用，必須與動作關聯起來。 Qt Designer 提供了一個動作編輯器，使用它創建和管理動作是一件非常輕松的事情。 創建動作有兩種做法，一種就是在創建子菜單的同時，一并創建動作；另一種就是先 不創建子菜單，而是使用動作編輯器創建動作，然后再把動作 “拖”到菜單項上，這就在創 建動作的同時也創建了子菜單項。第一種前面已經講過了，這里重點講解后一種做法。首先 了解一下動作編輯器的用法。 專題：動作編輯器（Action Editor） 默認情況下，動作編輯器是顯示在 Qt Designer 的右半部分的，如圖 8-11 所示。  圖 8-11 動作編輯器的樣子 要控制動作編輯器的顯示和隱藏也很容易，方法是依次點擊主菜單項 【視圖】→【動 作編輯器】，如圖 8-12 所示。選中時，該項前面有一個對勾標記，表示顯示動作編輯器， 反之，該項前面沒有對勾，則表示隱藏動作編輯器。  圖 8-12 顯示或隱藏動作編輯器 動作編輯器允許用戶創建、刪除動作。它同時也提供了基于動作文本的搜索選項。 動作編輯器可以以圖標視圖（Icon View）或者是細節視圖（Detailed View）的方式瀏覽。配置的方法是通過鼠標右鍵的上下文菜單，如圖 8-13 所示，通過使用該菜單項可以對 動作進行增加、刪除等各種操作。也可以使用動作編輯器工具欄上的快捷按鈕。  圖 8-13 設置動作編輯器的瀏覽方式 要創建一個動作，可以在動作編輯器中點擊 【新建】按鈕，將彈出【新建動作】對話 框，如圖 8-14 所示。像圖中那樣為動作設置各個屬性。當一個動作被創建完成后，它就可 以被應用了。  圖 8-14 新建一個動作 在配置動作的圖標時，如果不滿意默認的圖標，可以使用資源瀏覽器創建一個資源文 件（.qrc 文件），并添加各種圖標文件。資源瀏覽器的使用請看后面的專題。 創建一個動作后，還需要把它與菜單或工具欄連接起來。方法是在動作編輯器上的某 個動作上點擊鼠標左鍵，不要松開，把它拖到要關聯的菜單或工具欄上。 Qt Designer 提供 了紅色的高亮線來指示動作要關聯的位置，判斷好了之后，就可以釋放鼠標左鍵，從而把動 作與菜單或工具欄按鈕關聯起來。圖 8-15 顯示了設置動作與菜單項關聯的情形，圖 8-16 顯示了設置動作與工具欄按鈕關聯的情形。  圖 8-15 設置動作與菜單項的關聯  圖 8-16 設置動作與工具欄按鈕的關聯 ### 8.4.3 創建工具欄 創建工具欄很容易，通過使用鼠標右鍵的上下文菜單項 【添加工具欄】即可，如圖所 示。同樣的，如果已經有了工具欄，同樣可以通過該上下文菜單項移除工具欄。  圖 8-17 添加工具欄 要創建工具欄上的按鈕，就必須在動作已經被創建的情況下才能進行。一個比較好的 方法是從動作編輯器中拖動動作至工具欄上，在認為合適的地方松開鼠標左鍵，這時就創建 了一個工具欄按鈕。具體做法與上一小節介紹的相同。 工具欄上的按鈕是可以被分組的，方法是使用鼠標右鍵的上下文菜單項 【添加分隔 符】，這樣為【File】和【Edit】菜單分別創建工具組，如圖 8-18 所示。  圖 8-18 設置好工具欄的主窗口程序 ### 8.4.4 創建錨接窗口部件（不是必需的） 從 Qt 4.5 開始，Qt Designer 在其窗口部件盒中可視化的提供了錨接窗口部件，這就 進一步簡化了創建錨接窗口的步驟。因此，為主窗口程序創建錨接窗口比較簡單，就是把這個部件從窗口部件盒中拖出來，放到合適的位置。如圖 8-19 所示的例子中，一共放置了 4個錨接窗口部件，而且上、下、左、右這 4 個可供停靠的位置上可以放置不止一個錨接窗 口部件。  圖 8-19 添加錨接窗口部件 注意，拖動錨接窗口部件時，不必太在意它的初始位置，這可以在屬性編輯器中調 整，其錨接位置主要是通過 dockWidgetArea 屬性來設置，如圖 8-20 所示。  圖 8-20 設置 dockWidgetArea 屬性 ### 8.4.5 創建中心窗口部件 在 Qt Designer 中為主窗口創建中心窗口部件，只需要將一個窗口部件拖動到窗口部 件盒中，然后再設置一個布局即可， Qt 會為程序設置好中心部件。如圖 8-21 所示，圖中 放置了一個 TextEdit 窗口部件，然后設置了一個垂直布局。  圖 8-21 設置好中心窗口部件 我們可以從對象查看器中看到布局以及中心窗口部件的設置情況，如圖 8-22 所示。  圖 8-22 布局以及中心窗口部件的情況 好了，到此我們就使用 Qt Designer 創建了一個完整的主窗口界面，步驟也是比較清 晰的。中間用到了屬性編輯器、對象瀏覽器、資源瀏覽器和動作編輯器以及窗口部件盒等重 要的工具，幾乎將 Qt Designer 所用到的功能練習了一遍。使用 Qt Designer 創建主窗口 界面后，仍然需要使用代碼完成菜單項的功能，可以采用手寫代碼的方式，也可以借助于 Qt Creator 這樣的 IDE。請讀者朋友自行練習。