在前面兩節(jié)的例子中，主界面窗口的尺寸和標(biāo)簽控件顯示的矩形區(qū)域等，都是用 C++ 代碼編寫的。窗口和控件的尺寸都是預(yù)估的，控件如果多起來，那就不好估計(jì)每個控件合適的位置和大小了。

用 C++ 代碼編寫圖形界面的問題就是不直觀，因此 Qt 項(xiàng)目開發(fā)了專門的可視化圖形界面編輯器——Qt Designer（Qt 設(shè)計(jì)師）。通過 Qt Designer 就可以很方便地創(chuàng)建圖形界面文件 *.ui ，然后將 ui 文件應(yīng)用到源代碼里面，做到“所見即所得”，大大方便了圖形界面的設(shè)計(jì)。

本節(jié)就演示一下 Qt Designer 的簡單使用， 學(xué)習(xí)拖拽控件和設(shè)置控件屬性，并將 ui 文件應(yīng)用到 Qt 程序代碼里。

使用 Qt Designer 設(shè)計(jì)界面

在開始菜單中找到「Qt 5.9.0-->5.9-->MinGW 5.3.0(32-bit)-->Designer」，或者在 Qt 命令行工具中直接輸入命令designer ，兩種方法都可以打開 Qt Designer。 Qt Designer 默認(rèn)會彈出新建窗體的對話框，如下圖所示：

新建窗體對話框左邊是各種窗體的類型模板，“templates\forms”是常見的作為用戶主界面的窗體類型：

• 前面三個（Dialog With Buttons Bottom、Dialog With Buttons Right、Dialog With Buttons）都是對話框窗口，分別為按鈕居底部、按鈕居右邊和不帶按鈕。
• 第四個是“Main Window”，即主窗口界面，主窗口功能最為豐富，有菜單欄、工具欄、狀態(tài)欄、中央部件， 并且可以添加停靠/浮動窗口。這個比較復(fù)雜，后續(xù)章節(jié)講解。
• 第五個是最簡單的通用“Widget”界面，本節(jié)就使用這個作為主界面窗口。
  

選中“Widget”之后，再點(diǎn)擊“創(chuàng)建”按鈕，就會新建一個該類型的窗體，如下圖所示：

Qt Designer 的上方是菜單欄和工具欄，工具欄里需要留心的是中間的四個按鈕，是指圖形界面的四種編輯模式，依次為：

本節(jié)只使用第 ① 種“編輯窗口部件”的模式，其他的以后再慢慢講。

Qt Designer 左邊的“Widget Box”是控件（或叫部件）工具箱， 包含了豐富的可拖拽的 Qt 控件。

Qt Designer 中間部分帶有點(diǎn)陣標(biāo)示的窗體就是我們新建的界面窗體。

Qt Designer 右邊是三個工具箱窗口：

• 第一個是對象查看器，用來記錄當(dāng)前窗體里面有哪些控件，每個控件對象的名稱和類名都會列出來，可以看到默認(rèn)的對象是 Form，它的類名是 QWidget；
• 第二個是屬性編輯器，用于編輯窗體或控件的屬性，比如對象名稱、窗口標(biāo)題、窗口大小等等。
• 第三個工具箱比較復(fù)雜，它是選項(xiàng)卡式的，有“資源瀏覽器”、“動作編輯器”和“信號/槽編輯器”三個工具箱，這幾個以后再講，本節(jié)暫時用不著。
  

拖拽控件是最簡單不過的了，這里描述拖一個標(biāo)簽控件到主界面。在左邊“Widget Box”里面，把滑塊拖到最底下， 或用鼠標(biāo)滾輪往下滾到底，可以看到“Display Widgets”類別里的“Label”控件，這個就是前面幾節(jié)使用的 QLabel 。將鼠標(biāo)指針移到“Label”，左鍵按下不松，再往主界面窗口里拖動，拖到大概靠主界面窗體的左上位置， 然后松開鼠標(biāo)左鍵，就給主界面窗口添加了一個標(biāo)簽控件了。添加后，界面窗體如下圖所示：

上圖只截了中間的主界面窗體和右邊的兩個工具窗口，主界面的“TextLabel”就是選中的標(biāo)簽控件，它周圍一圈有 8 個可拖動的小方塊，可以拉伸標(biāo)簽控件的大小，如果鼠標(biāo)左鍵按到該控件上拖動就可以控制 控件顯示的位置。

在對象查看器里，這時候多出來一行“l(fā)abel”和“QLabel”，就是標(biāo)簽對象的名稱和類名。

在屬性編輯器里，可以看到“l(fā)abel : QLabel”字樣，說明這時可以設(shè)置 label 的屬性。 label 的屬性非常多，可以用鼠標(biāo)滾輪滾動查看眾多屬性，就不一一枚舉了。

最關(guān)鍵的屬性都自動被加粗顯示了，有三個：

標(biāo)簽控件對象名稱就不修改了，因?yàn)榫鸵粋€。我們設(shè)置 geometry 的四個子屬性： X 為 10，Y 為 10，寬度為 200，高度為 40，如下圖所示：

可以看到中間的標(biāo)簽控件就正確地顯示為距離左邊 10 像素，距離上方 10 像素，寬度為 200 像素， 高度為 40 像素的大標(biāo)簽了。

然后在屬性編輯器里拖動右邊滑塊，找到 text 屬性，點(diǎn)擊值列的“TextLabel”，修改為“C語言中文網(wǎng)”（不含雙引號），主界面里的標(biāo)簽就顯示為“C語言中文網(wǎng)”了。

這時看到的是帶有點(diǎn)陣的主界面窗口，點(diǎn)陣是方便對齊控件和估計(jì)控件大小的，點(diǎn)陣分割的最小正方形就是 10*10 的。 如果希望看到運(yùn)行時的主界面窗口顯示效果，可以點(diǎn)擊 Qt Designer 的菜單“窗體 --> 預(yù)覽(P)...”，或者按快捷鍵 Ctrl+R，新彈出顯示的就是運(yùn)行時沒有點(diǎn)陣的正常窗體預(yù)覽效果：

點(diǎn)擊右上角關(guān)閉按鈕就可以關(guān)閉預(yù)覽。到這我們的主界面窗口就編輯完成了。

點(diǎn)擊 Qt Designer 菜單“文件 --> 保存(S)”，或者按快捷鍵 Ctrl+S，將該文件保存到 D:\QtDemo\ 文件夾里面，保存的文件名為 hello.ui 。 

ui 文件其實(shí)就一個標(biāo)準(zhǔn) XML 格式的文本文件，我們可以用文本編輯器打開，它的內(nèi)容如下：

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
    <class>Form</class>

    <!-- 主窗口 -->
    <widget class="QWidget" name="Form">
        <!-- 主窗口幾何尺寸 -->
        <property name="geometry">
            <rect>
                <x>0</x>
                <y>0</y>
                <width>427</width>
                <height>244</height>
            </rect>
        </property>
        <!-- 主窗口標(biāo)題 -->
        <property name="windowTitle">
            <string>Form</string>
        </property>

        <!-- Label控件 -->
        <widget class="QLabel" name="label">
            <!-- Label控件幾何尺寸 -->
            <property name="geometry">
                <rect>
                    <x>10</x>
                    <y>10</y>
                    <width>200</width>
                    <height>40</height>
                </rect>
            </property>
            <!-- Label控件文本 -->
            <property name="text">
                <string>C語言中文網(wǎng)</string>
            </property>
        </widget>
    </widget>

    <resources/>
    <connections/>
</ui>

由<!-- -->包圍起來的是注釋，是我自己添加的。

到此這篇關(guān)于Qt Designer的簡單使用方法的文章就介紹到這了,更多相關(guān)Qt Designer使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論