本文向介紹利用Qt開發(fā)圖形用戶界面的應(yīng)用程序的入門知識(shí)。這里，我們首先介紹了如何搭建Qt的開發(fā)環(huán)境，之后通過一些簡單的示例程序來循序漸進(jìn)地介紹Qt的“信號(hào)和槽”以及布局等基本概念。我們希望以此來幫助讀者盡快地對(duì)Qt圖形用戶界面應(yīng)用程序開發(fā)有一個(gè)初步的認(rèn)識(shí)，并為進(jìn)一步學(xué)習(xí)打下一個(gè)良好的基礎(chǔ)。
一、什么是Qt

Qt 是一個(gè)用于桌面系統(tǒng)和嵌入式開發(fā)的跨平臺(tái)應(yīng)用程序框架。它包括一個(gè)直觀的API和一個(gè)豐富的類庫，以及用于GUI開發(fā)和國際化的集成工具，另外它支持Java™和C++開發(fā)。利用它，我們無須重新編寫源代碼，便可以構(gòu)建運(yùn)行在不同桌面操作系統(tǒng)和嵌入式設(shè)備上的軟件應(yīng)用程序。

借助Qt，我們可以更快速地構(gòu)建先進(jìn)的用戶界面：它不僅提供了豐富的標(biāo)準(zhǔn)widgets庫，動(dòng)態(tài)布局引擎等GUI功能，還通過集成OpenGL® 與OpenGL ES提供了先進(jìn)的3D可視化支持，此外，它還具有強(qiáng)大的圖形畫布和Widgets樣式表，使我們得以使用變焦、旋轉(zhuǎn)和人機(jī)互動(dòng)功能構(gòu)建先進(jìn)的用戶界面，并且能用寥寥幾行代碼便可快速定制自己的用戶界面。

雖然Qt提供了許多高級(jí)功能，但千里之行，始于足下，還是讓我們先從最基本的知識(shí)開始入手吧。下面介紹如何搭建Qt開發(fā)環(huán)境。

二、搭建Qt開發(fā)環(huán)境

雖然Qt自身帶有構(gòu)建工具，但它是在命令行下使用的，多少有些不便。所以，我們?cè)诖俗约簞?dòng)手建設(shè)自己的Qt集成開發(fā)環(huán)境。下面介紹Qt開發(fā)環(huán)境的具體搭建過程。

首先，從互聯(lián)網(wǎng)上搜索并下載Dev-C++，安裝很簡單，一路回車就可以了。然后，到http://www.trolltech.com/download/下載***的安裝包，對(duì)于Windows系統(tǒng)來說，可以下載已編譯好的安裝包，當(dāng)前***版為qt-win-opensource-4.4.0-mingw.exe。在Qt安裝過程中唯一需要注意的是，當(dāng)安裝程序要求選擇mingw的路徑時(shí)，直接選擇Dev-Cpp的安裝路徑就行了。安裝好上述兩個(gè)軟件后，***還要到http://download.csdn.net/source/219376下載Qt4 For Dev-Cpp Templates，下載后將其解壓到Dev-Cpp的Templates文件夾下即可。這是用于在Dev-Cpp下開發(fā)Qt程序的模板資源。

***，把Qt安裝目錄中的\bin目錄中的動(dòng)態(tài)鏈接庫拷貝到windows目錄下，這樣當(dāng)運(yùn)行編譯好的Qt程序時(shí)，就再也不會(huì)碰到無法找到Qt的DLL 的問題了。

三、我們的***個(gè)Qt程序

迄今為止，我們已經(jīng)搭建好了Qt的開發(fā)環(huán)境，接下來就可以編寫我們的***個(gè)Qt程序。按照學(xué)習(xí)編程的老傳統(tǒng)，一般編寫的***個(gè)程序都是一個(gè)Hello程序，我們也不例外。

運(yùn)行Dev-C++，在其“文件”菜單中選擇“新建”菜單項(xiàng)，然后單擊“工程”命令，出現(xiàn)如下圖所示的對(duì)話框：

圖1 新建Qt工程

選擇其中的“Empty Project”，以便建立一個(gè)空項(xiàng)目，將項(xiàng)目名稱定為“hello”，其他選擇默認(rèn)，如圖1所思，然后單擊“確定”按鈕。在彈出的“Create new project”對(duì)話框中選擇工程文件名稱和保存路徑，如圖2所示。

圖2 保存項(xiàng)目文件

上面已經(jīng)新建了一個(gè)空的Qt項(xiàng)目，現(xiàn)在為它添加一個(gè)源代碼文件。在Dev-C++的“文件”菜單中選擇“新建”菜單項(xiàng)，然后單擊“源代碼”命令，在彈出的確認(rèn)對(duì)話框中單擊“Yes”按鈕。在編輯區(qū)中錄入如下代碼，保存源代碼文件時(shí)將其命名為hello.cpp。

#include <QApplication>   
#include <QLabel>   
int main(int argc, char *argv[])   
{   
    QApplication app(argc, argv);   
    QLabel *label = new QLabel("Hello World!");   
    label->show();   
    return app.exec();   
}  

現(xiàn)在，讓我們來編譯該程序。單擊“運(yùn)行”菜單中的“編譯”菜單項(xiàng)，出現(xiàn)如下圖所示對(duì)話框時(shí)，說明沒有出現(xiàn)錯(cuò)誤，編譯成功。

圖3 編譯成功

單擊“關(guān)閉”按鈕。很好，現(xiàn)在運(yùn)行我們***個(gè)Qt應(yīng)用程序的時(shí)候到了，單擊“運(yùn)行”菜單中的“運(yùn)行”菜單項(xiàng)。來，看看我們的“大作”吧!

圖4 我們的hello程序

上面演示了在集成開發(fā)環(huán)境中開發(fā)Qt應(yīng)用程序的整個(gè)過程，下面開始介紹我們的源代碼。俗話說，萬事開頭難，所以我們?cè)谶@里會(huì)盡可能細(xì)致地為讀者講解這些代碼。

#include  <QApplication> 
#include  <QLabel>  

在這個(gè)程序中，我們總共用到了兩個(gè)類QApplication和Qlabel，根據(jù)先聲明后使用的原則，我們?cè)谏厦鎯尚袑⑦@兩個(gè)類的定義包含到我們的代碼中。對(duì)Qt來說，它的每一個(gè)類都有一個(gè)同名的頭文件與之對(duì)應(yīng)，這個(gè)類的定義就在這個(gè)頭文件中。我們注意到，這兩個(gè)頭文件都是以大寫字母開頭的，實(shí)際上類對(duì)應(yīng)的頭文件都是這樣。

int main(int argc, char *argv[])  

在這里，main()函數(shù)是程序的入口。在使用Qt的時(shí)候，main()一般只是執(zhí)行一些初始化工作，接著就把控制轉(zhuǎn)交給Qt庫，然后Qt庫通過事件來向程序報(bào)告用戶的行為。

QApplication app(argc, argv);  

上面這行代碼為QApplication創(chuàng)建了一個(gè)對(duì)象，實(shí)際上，在每一個(gè)使用Qt的應(yīng)用程序中都必須有一個(gè)QApplication對(duì)象，該對(duì)象用來管理應(yīng)用程序的各種資源。一般說來，在使用Qt的窗口部件被之前，要首先創(chuàng)建QApplication對(duì)象。因?yàn)镼t支持命令行參數(shù)，所以這里的QApplication帶有argc和argv，用來接收入口函數(shù)從系統(tǒng)那里接收到的命令行變量，以便進(jìn)一步處理。

QLabel *label = new QLabel("Hello World!");  

這一行創(chuàng)建了一個(gè)窗口部件QLabel，我們用它來顯示一則消息“Hello World!”。按照Qt的術(shù)語，一個(gè)窗口部件就是用戶界面中的一個(gè)可見的用戶界面對(duì)象，它能夠處理用戶輸入和繪制圖形，它相當(dāng)于Windows的術(shù)語中的一個(gè)控件或容器。我們可以改變窗口部件的全部觀感、主要屬性(比如顏色等)以及窗口部件的內(nèi)容等。我們常見的按鈕、菜單、滾動(dòng)條和框架等都屬于窗口部件。窗口部件可以包含其它的窗口部件，比如應(yīng)用程序窗口通常就是一個(gè)窗口部件，而其中又包含了QMenuBar、QToolBars、QstatusBar以及其它的窗口部件。大多數(shù)應(yīng)用程序使用一個(gè)QMainWindow或者QDialog作為自己的主窗口，但是這不是必須的的，實(shí)際上任何窗口部件都能當(dāng)作程序的主窗口。就本例而言，窗口部件QLabel就是應(yīng)用程序的主窗口或者說是主窗口部件。如果用戶關(guān)閉了主窗口部件，應(yīng)用程序就會(huì)退出。

label->show();  

默認(rèn)時(shí)，窗口部件是不可見的，之所以這樣，是為了讓我們可以在顯示之前對(duì)窗口部件進(jìn)行必要的設(shè)定，以防止閃爍現(xiàn)象的發(fā)生。上面這一行代碼的作用是使標(biāo)簽變?yōu)榭梢姷摹?/p>

return app.exec();  

上面這一行代碼將應(yīng)用程序的控制權(quán)交給Qt，交權(quán)后，應(yīng)用程序便進(jìn)入事件循環(huán)狀態(tài)。這時(shí)的程序只是靜靜地等待用戶的鼠標(biāo)或鍵盤之類的動(dòng)作。當(dāng)用戶發(fā)出動(dòng)作時(shí)，就會(huì)生成相應(yīng)的事件，如果這些事件正是該程序需要響應(yīng)的那些事件，它便會(huì)執(zhí)行一些函數(shù)來響應(yīng)用戶的動(dòng)作。

迄今為止，我們已經(jīng)編譯運(yùn)行了***個(gè)Qt應(yīng)用程序，并且對(duì)該程序的源代碼有了初步的了解，但是我們的這個(gè)程序非常簡單，簡單到顯示一條消息后就只能通過標(biāo)題欄上的“關(guān)閉”按鈕來關(guān)閉。接下來我們將進(jìn)一步學(xué)習(xí)如何通過窗口部件來跟用戶互動(dòng)。

#p#

四、跟用戶互動(dòng)

在第二個(gè)實(shí)例中，我們將為大家介紹如何響應(yīng)用戶的動(dòng)作。該程序也很簡單，它僅由一個(gè)按鈕組成，當(dāng)用戶單擊該按鈕時(shí)，程序就會(huì)退出。這個(gè)應(yīng)用程序運(yùn)行畫面如下所示：

圖5 利用按鈕跟用戶進(jìn)行交互

下面是該程序的源代碼：

    #include  <QApplication> 
　　#include  <QPushButton> 
　　int main(int argc, char *argv[])   
　　{   
　　QApplication app(argc, argv);   
　　QPushButton *button = new QPushButton("Quit");   
　　QObject::connect(button, SIGNAL(clicked()),   
　　&app, SLOT(quit()));   
　　button->show();   
　　return app.exec();   
　　}  

我們看到，這里的源代碼跟上面的非常相似，只有兩處不一樣，一是主窗口部件是QPushButton，而非Qlabel;二是將用戶操作(如這里的單擊按鈕)跟一段代碼聯(lián)系在一起。當(dāng)用戶執(zhí)行某些操作，或狀態(tài)發(fā)生變化時(shí)，Qt的窗口部件就會(huì)發(fā)出一些信號(hào)來指示這些事件的發(fā)生。舉例來說，當(dāng)用戶單擊按鈕時(shí)，QPushButton就會(huì)發(fā)出一個(gè)clicked()信號(hào)。這時(shí)，跟這個(gè)事件相聯(lián)系的代碼就會(huì)就會(huì)自動(dòng)執(zhí)行。在QT中，對(duì)這樣的代碼有一個(gè)專門的稱謂，叫做槽。對(duì)這里的例子來說，我們將按鈕的clicked()信號(hào)連到QApplication的槽quit()上。所以，單擊Quit按鈕，或按下空格鍵時(shí)，該程序就會(huì)終止。

這里涉及到Qt的一個(gè)基本思想，那就是“信號(hào)和槽”。這一思想需要專門一篇文章來進(jìn)行解釋，我們這里只要知道，每個(gè)Qt對(duì)象，無論是直接還是間接繼承QObject對(duì)象的對(duì)象，都能用信號(hào)發(fā)出信息，也能用槽來接收信息并作出反應(yīng)。這里要注意的是，所有窗口部件都是Qt對(duì)象，因?yàn)樗鼈兝^承自QWidget，而Qwidget又繼承自QObject。

這里的connect()是QObject中的一個(gè)靜態(tài)函數(shù)，它的作用是將信號(hào)和槽連接在一起。比如本例中，它把按鈕的clicked()信號(hào)和QApplication的槽quit()連接起來了，所以當(dāng)這個(gè)按鈕被按下的時(shí)候，這個(gè)程序就退出了。

五、窗口部件的布局

讀者可能已經(jīng)發(fā)現(xiàn)，我們上面的兩個(gè)例子中，都只是用了一個(gè)窗口部件，但是現(xiàn)實(shí)情況卻是一個(gè)程序界面中有多個(gè)窗口部件，并且一些窗口部件通常還位于其他窗口部件之內(nèi)。這時(shí)問題就來了：如何將一些窗口部件放進(jìn)另一個(gè)窗口部件中?放進(jìn)去以后又如何對(duì)它們進(jìn)行布置呢?別急，這些事情Qt的設(shè)計(jì)者早就替我們考慮到了，下面就介紹Qt的自動(dòng)布局支持。

除了解釋如何使用布局來管理窗口部件在窗口中的幾何形狀之外，本示例程序還將為讀者介紹如何使用信號(hào)和槽來實(shí)現(xiàn)兩個(gè)窗口部件的同步。如下圖所示：

圖6 窗口部件布局與同步示例

我們可以在這個(gè)界面中輸入一個(gè)1到100之間的數(shù)字。當(dāng)然，我們可以用兩種方法輸入數(shù)字，既可以拖動(dòng)滑塊，也可以使用Spinbox按鈕。但是，無論使用哪一種方式，只要一邊表示的數(shù)字發(fā)生了變化，另一邊也會(huì)隨之改變，所以它們總能保持一致。該示例程序的源代碼如下所示：

 #include <QApplication> 
  #include <QHBoxLayout> 
  #include <QSlider> 
  #include <QSpinBox> 
　　int main(int argc, char *argv[])   
　　{   
　　QApplication app(argc, argv);   
　　QWidget *window = new QWidget;   
　　window->setWindowTitle("Enter Your Number");   
　　QSpinBox *spinBox = new QSpinBox;   
　　QSlider *slider = new QSlider(Qt::Horizontal);   
　　spinBox->setRange(0, 100);   
　　slider->setRange(0, 100);   
　　QObject::connect(spinBox, SIGNAL(valueChanged(int)),   
　　slider, SLOT(setValue(int)));   
　　QObject::connect(slider, SIGNAL(valueChanged(int)),   
　　spinBox, SLOT(setValue(int)));   
　　spinBox->setValue(60);   
　　QHBoxLayout *layout = new QHBoxLayout;   
　　layout->addWidget(spinBox);   
　　layout->addWidget(slider);   
　　window->setLayout(layout);   
　　window->show();   
　　return app.exec();   
　　}  

 
該應(yīng)用程序的界面由三個(gè)窗口部件組成，分別是QSpinBox、QSlider和QWidget，其中QWidget是本程序的主窗口，然后在QWidget內(nèi)再引用QSpinBox和QSlider，所以后兩者是前者的子部件，或者說前者是后兩者的父部件。QWidget本身沒有父部件，因?yàn)樗且粋€(gè)***窗口。QWidget及其子類的構(gòu)造函數(shù)使用參數(shù)QWidget *來規(guī)定其父部件。

下面我們對(duì)源代碼進(jìn)行解釋：

QWidget *window = new QWidget;   
window->setWindowTitle("Enter Your Number");  

上面兩行將QWidget設(shè)置為該程序的主窗口，其中setWindowTitle()用于規(guī)定顯示在這個(gè)窗口標(biāo)題欄中的文本內(nèi)容。
 

QSpinBox *spinBox = new QSpinBox;   
QSlider *slider = new QSlider(Qt::Horizontal);  

上面兩行創(chuàng)建了一個(gè)QSpinBox和一個(gè)QSlider，然后，

spinBox->setRange(0, 100);   
slider->setRange(0, 100);  

這兩行設(shè)置了其有效范圍，我們這里選擇0至100之間的數(shù)字。

QObject::connect(spinBox, SIGNAL(valueChanged(int)),   
slider, SLOT(setValue(int)));   
QObject::connect(slider, SIGNAL(valueChanged(int)),   
spinBox, SLOT(setValue(int)));  

在上面的兩個(gè)語句中，我們調(diào)用了QObject::connect()兩次，實(shí)現(xiàn)了Spinbox按鈕和滑塊之間的同步，從而使得顯示的結(jié)果將保持一致。當(dāng)一個(gè)窗口部件中的值發(fā)生變化時(shí)，它就會(huì)發(fā)出valueChanged(int)信號(hào)，并用這個(gè)新值來調(diào)用另一個(gè)窗口部件的槽setValue(int)，這樣它們就能保持一致。

spinBox->setValue(60);  

上面這一行代碼將Spinbox按鈕的值設(shè)為60。這時(shí)，QSpinBox會(huì)發(fā)出valueChanged(int)信號(hào)，其中參數(shù)int為60，這個(gè)參數(shù)傳遞給QSlider的槽setValue(int)，這個(gè)槽繼而將滑塊值設(shè)為60。 因?yàn)榛瑝K自己的值變了，所以它會(huì)發(fā)出信號(hào)valueChanged(int)來觸發(fā)Spinbox按鈕的槽setValue(int)。不過由于Spinbox按鈕的值早已是60，兩者是一致的，所以它就不會(huì)繼續(xù)發(fā)信號(hào)了，同步過程至此結(jié)束。

QHBoxLayout *layout = new QHBoxLayout;   
layout->addWidget(spinBox);   
layout->addWidget(slider);  

通過上面三行代碼，我們新建了一個(gè)一個(gè)布局管理器，然后將Spinbox按鈕和滑塊這兩個(gè)窗口部件交給這個(gè)布局管理器，讓它來對(duì)這兩個(gè)部件的大小和位置等作出安排。一個(gè)布局管理器是一個(gè)對(duì)象，用于設(shè)置窗口部件的位置和尺寸。Qt的布局管理器分為三大類：

QHBoxLayout將窗口小部件從左至右，或者從右到左水平放置窗口部件。

QVBoxLayout將窗口小部件自上而下垂直布置。

QGridLayout將窗口小部件布置在一個(gè)網(wǎng)格中。

window->setLayout(layout);  

我們?cè)谝陨洗a中調(diào)用QWidget::setLayout()，這會(huì)在窗口中安裝一個(gè)布局管理器。這樣一來，QSpinBox和QSlider又進(jìn)一步成為安裝布局管理器的窗口部件的子部件，所以當(dāng)我們創(chuàng)建一個(gè)將來要放入布局管理器的窗口部件時(shí)，不用顯式地指出其父部件。

如果我們要想顯式地給QSpinBox和Qslider指定父窗口部件的話，可以在創(chuàng)建它們時(shí)將參數(shù)window傳遞給QSpinBox和QSlider的構(gòu)造函數(shù)，以規(guī)定讓window作為它們的父部件。

使用布局管理器有很大的優(yōu)點(diǎn)，就像上面看到的那樣，即使不對(duì)任何窗口部件的位置和尺寸進(jìn)行任何顯式地設(shè)置，***QSpinBox和QSlider還是很好地并排布置在了一起。這是因?yàn)镼HBoxLayout會(huì)根據(jù)需要，自動(dòng)地為其負(fù)責(zé)的窗口部件指定合適的位置和大小。更重要的是，該布局管理器將我們從在程序中硬編碼窗口部件的屏幕位置的瑣碎工作中解放了出來，它會(huì)替我們處理窗口平滑縮放等相應(yīng)事項(xiàng)。

小結(jié)

本文簡單介紹了信號(hào)和槽的連接以及布局的基本知識(shí)，并介紹了Qt的完全面向?qū)ο蟮臉?gòu)造和利用窗口小部件的方法。我們發(fā)現(xiàn)，利用Qt構(gòu)造用戶界面的方式簡潔而又靈活，我們只需要?jiǎng)?chuàng)建窗口部件對(duì)象，然后根據(jù)需要為其設(shè)置屬性即可。此外，我們還可以將生成的窗口部件添加到布局管理器中，這樣，布局管理器就會(huì)自動(dòng)地調(diào)整這些窗口部件的尺寸和位置。同時(shí)，我們還可以通過信號(hào)和槽機(jī)制方便的將用戶界面的行為跟Qt的窗口部件聯(lián)系在一起，這樣就能實(shí)現(xiàn)程序跟用戶的互動(dòng)了。