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

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

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

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

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

新建窗體對(duì)話(huà)框左邊是各種窗體的類(lèi)型模板，“templates\forms”是常見(jiàn)的作為用戶(hù)主界面的窗體類(lèi)型：

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

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

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

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

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

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

Qt Designer 右邊是三個(gè)工具箱窗口：

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

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

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

在對(duì)象查看器里，這時(shí)候多出來(lái)一行“l(fā)abel”和“QLabel”，就是標(biāo)簽對(duì)象的名稱(chēng)和類(lèi)名。

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

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

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

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

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

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

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

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

ui 文件其實(shí)就一個(gè)標(biāo)準(zhǔn) XML 格式的文本文件，我們可以用文本編輯器打開(kāi)，它的內(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語(yǔ)言中文網(wǎng)</string>
            </property>
        </widget>
    </widget>

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

由<!-- -->包圍起來(lái)的是注釋?zhuān)俏易约禾砑拥摹?/p>

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

最新評(píng)論