基于LinuxQt4下自定義對(duì)話框的設(shè)計(jì)與實(shí)現(xiàn)

項(xiàng)偉

摘 要： Qt作為一個(gè)跨平臺(tái)的C++圖形用戶界面（GUI）應(yīng)用程序開發(fā)工具，在Linux系統(tǒng)中得到了廣泛的應(yīng)用。在使用Qt開發(fā)GUI應(yīng)用程序時(shí)，經(jīng)常需要設(shè)計(jì)和實(shí)現(xiàn)對(duì)話框窗口。在闡述了Qt特性、Linux Qt4環(huán)境搭建方法及Qt4標(biāo)準(zhǔn)對(duì)話框與自定義對(duì)話框的區(qū)別的基礎(chǔ)上，介紹了用Qt4布局管理器實(shí)現(xiàn)用戶界面的相關(guān)技術(shù)，分析了用Qt4設(shè)計(jì)自定義對(duì)話框的基本流程，完成了自定義對(duì)話框的設(shè)計(jì)與實(shí)現(xiàn)。

關(guān)鍵詞： Qt； Linux Qt4； 對(duì)話框； 自定義對(duì)話框； 布局管理器

中圖分類號(hào)：TP316.2 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1006-8228（2017）09-27-03

Abstract： Qt， as a cross-platform C++ graphical user interface （GUI） application development tool， has been widely used in Linux system. It is often necessary to design and implement the dialog window when developing GUI applications using Qt. The article expounds the characteristics of Qt and the method of setting up Linux Qt4 developing environment， and describes the difference between the Qt4 standard dialog and the custom dialog. On this basis， the article introduces the related technologies of using Qt4 layout manager to implement the user interface， analyzes the basic process of using Qt4 to design custom login dialog， and completes the design and implementation of custom dialog box.

Key words： Qt； Linux Qt4； dialog； custom dialog； layout manager

0 引言

Qt是由奇趣科技開發(fā)的跨平臺(tái)C++圖形用戶界面應(yīng)用程序開發(fā)框架，它提供給應(yīng)用程序開發(fā)者建立藝術(shù)級(jí)的圖形用戶界面所需的所有功能，既可以開發(fā)GUI程序，也可用于開發(fā)非GUI程序。Qt是一種面向?qū)ο蟮目蚣?，使用特殊的代碼生成擴(kuò)展（稱為元對(duì)象編譯器）以及一些宏，易于擴(kuò)展，并且允許真正地組件編程[1]。

Linux是一款開源的多用戶多任務(wù)操作系統(tǒng)[2]，它是由全世界各地的成千上萬(wàn)的程序員借助于internet網(wǎng)絡(luò)努力實(shí)現(xiàn)的UNIX類操作系統(tǒng)，以高效性和靈活性著稱，又由于它是免費(fèi)獲得的，因此，現(xiàn)在越來(lái)越多的用戶選擇使用Linux操作系統(tǒng)。Linux在市場(chǎng)上有許多發(fā)行版本，所有的版本都包含一樣的Linux內(nèi)核、基本工具和應(yīng)用[3]，主流的發(fā)行版有Ubuntu、Fedora、Red Hat等。

1 Linux Qt4環(huán)境搭建

開發(fā)Qt程序需要在Linux中安裝Qt，也就是在Linux系統(tǒng)下搭建Qt環(huán)境，用于在計(jì)算機(jī)上開發(fā)Qt應(yīng)用程序。下面，筆者以在Ubuntu下安裝Qt4進(jìn)行操作。

1.1 Qt4安裝

在Linux下安裝應(yīng)用軟件最常用的操作方法就是在線在官網(wǎng)上下載軟件安裝包，用Linux命令進(jìn)行安裝。因此，安裝Qt4需在官網(wǎng)（http：//www.qt.io/download-open-source/）上免費(fèi)獲取Qt的源碼包（以qt-everywhere-opensource-src-4.7.4.tar.gz為例），然后，將源代碼庫(kù)編譯出所需要的Qt工具以及庫(kù)文件。在編譯之前，需要確保當(dāng)前計(jì)算機(jī)的Linux系統(tǒng)已經(jīng)安裝了gcc、make等編譯工具，具體操作步驟如下。

⑴ 將壓縮包下載到某個(gè)路徑（/usr）下解壓。

tar xzvf qt-everywhere-opensource-src-4.7.4.tar.gz

⑵ 將目錄切換至解壓好的文件下。

cd qt-everywhere-opensource-src-4.7.4

⑶ 運(yùn)行文件夾下的./configure，生成配置文件。在安裝過(guò)程中選擇開源（O）、YES選項(xiàng)。安裝過(guò)程中會(huì)存在各種問(wèn)題，需要及時(shí)解決，如：

安裝g++、make：sudo apt-get install g++ make

安裝libx11包：sudo apt-get install libx11-dev libxext-dev libxtst-dev

⑷ 運(yùn)行make，會(huì)出現(xiàn)錯(cuò)誤，需要安裝libxrender-

dev庫(kù)解決此錯(cuò)誤。

⑸ 運(yùn)行make install。

經(jīng)過(guò)以上五個(gè)步驟，Qt默認(rèn)安裝到/usr/local/Trolltech/Qt-4.7.4目錄中。

1.2 Qt4在Ubuntu下的配置

為了使用者在以后Qt開發(fā)中能更方便地使用Qt提供的qmake，moc等工具，需要把Qt的安裝路徑添加到PATH變量里，其具體操作步驟如下：

⑴ 用文本編輯器打開～/.bash_profile（此文件在當(dāng)前用戶的主目錄下），在文件中添加：endprint

PATH=/usr/local/Trolltech/Qt-4.7.4/bin

export PATH

⑵ 修改完成后保存文件，運(yùn)行以下命令使設(shè)置有效。

source ～/.bash_profile

⑶ 運(yùn)行echo $PATH，查看添加的路徑是否正確[4]。

1.3 Qt源程序的編譯

將Qt4在Linux操作系統(tǒng)下配置完好后，使用者就可以在任意目錄下編譯Qt程序了，其編譯過(guò)程如下。

⑴ 運(yùn)行qmake -project，將所有的文件編譯成一個(gè)與平臺(tái)無(wú)關(guān)的工程文件。

⑵ 運(yùn)行qmake，讀取本身的Qt設(shè)置，生成與庫(kù)一致的相應(yīng)的Makefile。

⑶ 運(yùn)行make，根據(jù)生成的Makefile，將文件編譯為二進(jìn)制可執(zhí)行程序。

2 Qt4布局管理器

對(duì)于一個(gè)GUI用戶界面來(lái)說(shuō)，合理地安排每一個(gè)窗口子部件是很必要的，而在Qt程序設(shè)計(jì)界面中的部件不能夠自動(dòng)進(jìn)行有序的排列，需利用Qt提供的絕對(duì)位置、手工布局、布局管理器3種方式確定窗口子部件的大小和位置。其中布局管理器是Qt界面程序開發(fā)中管理窗口子部件最好的方法，也是最實(shí)用的方法。

常用的布局管理器有：

⑴ 水平布局管理器QHBoxLayout，用于水平方向上從左到右組織管理窗口子部件；

⑵ 垂直布局管理器QVBoxLayout，用于垂直方向上從上到下組織管理窗口子部件；

⑶ 網(wǎng)格布局管理器QGridLayout，按二維的網(wǎng)格形式組織管理窗口子部件[5]。

在Qt下實(shí)現(xiàn)界面的設(shè)計(jì)，其實(shí)就是充分利用上面三種布局管理器來(lái)將窗口部件進(jìn)行分類和排列。設(shè)計(jì)時(shí)先根據(jù)排列的效果創(chuàng)建對(duì)應(yīng)布局管理器的布局對(duì)象，然后使用addWidget（）方法，將部件添加至布局，并使用setLayout（）方法把該布局管理器設(shè)置為窗口的布局管理器。

比如，若想使二個(gè)QPushButton按鈕部件從左到右均勻顯示，就使用QHBoxLayout水平布局管理器創(chuàng)建布局對(duì)象hLayout，再將這2個(gè)QPushButton按先后次序添加到hLayout布局中，效果如圖1所示。若想使二個(gè)QPushButton按鈕部件從上到下均勻顯示，就使用QVBoxLayout垂直布局管理器創(chuàng)建布局對(duì)象vLayout，再將這二個(gè)QPushButton按先后添加到vLayout布局中，效果如圖2所示。若想使二個(gè)QPushButton按鈕不均勻顯示，就使用QGridLayout網(wǎng)格布局管理器創(chuàng)建布局對(duì)象gLayout，再將這二個(gè)QPushButton分別按照其占行數(shù)、列數(shù)，位于幾行幾列等要素添加到gLayout布局中，效果如圖3所示。若想使多個(gè)部件排列成更復(fù)雜的布局，如圖4所示，可以采用在一個(gè)布局里嵌入另一個(gè)布局，在布局中使用addLayout（）方法來(lái)添加布局，內(nèi)部的布局就會(huì)變成它的子布局。針對(duì)圖4的效果，可以先將粗虛線范圍的部件設(shè)置為垂直布局管理器QVBoxLayout布局，再將細(xì)實(shí)線范圍的部件設(shè)置為水平布局管理器QHBoxLayout布局，向QVBoxLayout布局中添加一個(gè)文本框部件和一個(gè)QHBoxLayout布局（也就是QHBoxLayout布局變成QVBoxLayout布局的子布局），向QHBoxLayout布局中添加二個(gè)QPushButton按鈕部件。

總之，無(wú)論設(shè)計(jì)多么復(fù)雜的界面，我們都可以綜合選用水平布局管理器QHBoxLayout、垂直布局管理器QVBoxLayout、網(wǎng)格布局管理器QGridLayout來(lái)實(shí)現(xiàn)。

3 Qt4標(biāo)準(zhǔn)對(duì)話框與自定義對(duì)話框

對(duì)話框是一種特殊的窗口，一般用來(lái)給用戶提供反饋信息或者從用戶接收輸入信息，從而在用戶和應(yīng)用程序之間建立起交互的平臺(tái)，在各種軟件的使用中都會(huì)涉及，因此，能夠靈活設(shè)計(jì)形形色色的對(duì)話框是非常重要的。

QDialog是所有Qt對(duì)話框窗口的基類，它繼承自QWidget[6]。當(dāng)然，在Qt4中不僅提供了文件對(duì)話框QFileDialog、顏色對(duì)話框QColorDialog、字體對(duì)話框QFontDialog等常用的內(nèi)建對(duì)話框，還提供了消息對(duì)話框QMessageBox。設(shè)計(jì)者可以采用#include包含Qt用戶界面頭文件QtGui，QtGui頭文件包含了QtCore模塊和QtGui模塊的所有Qt類的定義，像這些對(duì)話框類的構(gòu)造函數(shù)也在其中，程序中使用對(duì)應(yīng)的對(duì)話框構(gòu)造函數(shù)就可以生成對(duì)應(yīng)的對(duì)話框了。但是，往往設(shè)計(jì)一款應(yīng)用程序時(shí)，內(nèi)建對(duì)話框與消息框都不太滿足需求，例如進(jìn)入一款程序的登錄對(duì)話框（如圖5所示），它與內(nèi)建、消息對(duì)話框不完全相同，那么，設(shè)計(jì)者就需要根據(jù)需求去設(shè)計(jì)對(duì)話框，這就是自定義對(duì)話框。

4 Qt4自定義對(duì)話框設(shè)計(jì)與實(shí)現(xiàn)

我們以圖5的登錄對(duì)話框?yàn)槔M(jìn)行Qt4自定義對(duì)話框的分析與設(shè)計(jì)。

4.1 自定義對(duì)話框的總框架

登錄對(duì)話框窗口是展現(xiàn)給用戶操作的界面，設(shè)計(jì)成由二個(gè)標(biāo)簽框QLabel、二個(gè)文本框QLineEdit、二個(gè)命令按鈕QPushButton三種類型的部件構(gòu)成；通過(guò)單擊二個(gè)命令按鈕QPushButton分別實(shí)現(xiàn)登錄和退出功能。

4.2 自定義對(duì)話框的算法

根據(jù)以上分析，創(chuàng)建login.h程序文件，定義繼承QDialog類的Login用戶類，該類具有二個(gè)標(biāo)簽框QLabel、二個(gè)文本框QLineEdit、二個(gè)命令按鈕QPushButton這六個(gè)屬性，loginClick（）、exitClick（）二個(gè)成員方法與一個(gè)loginInit（）構(gòu)造函數(shù)。

創(chuàng)建login.cpp程序文件，編寫實(shí)現(xiàn)loginInit（）、loginClick（）、exitClick（）功能代碼。其中，loginInit（）構(gòu)造函數(shù)完成六個(gè)部件的屬性值設(shè)置與利用Qt布局管理器技術(shù)實(shí)現(xiàn)Login用戶類中六個(gè)部件的組織排列及其它，登錄對(duì)話框整體是垂直布局QVBoxLayout組織，它由添加二個(gè)標(biāo)簽框QLabel、二個(gè)文本框QLineEdit的網(wǎng)格布局QGridLayout和二個(gè)命令按鈕QPushButton的水平布局QHBoxLayout形成。

5 結(jié)束語(yǔ)

本文研究了在Linux系統(tǒng)下使用Qt4編程工具開發(fā)自定義對(duì)話框的基本流程與設(shè)計(jì)方法，以及實(shí)現(xiàn)的主要技術(shù)，并將其應(yīng)用到登錄對(duì)話框中，實(shí)現(xiàn)了在Linux Qt4下開發(fā)用戶滿意的自定義對(duì)話框。實(shí)踐表明，該系統(tǒng)設(shè)計(jì)方案是行之有效的，其設(shè)計(jì)簡(jiǎn)潔，界面友好，功能完善。同時(shí)，Qt的優(yōu)良特性保證了本系統(tǒng)高效性和跨平臺(tái)性。

今后在實(shí)際應(yīng)用中，還可以對(duì)程序進(jìn)行改進(jìn)，將對(duì)話框窗口部件排列進(jìn)行優(yōu)化處理，增強(qiáng)用戶體驗(yàn)性。

參考文獻(xiàn)（References）：

[1] 百度.Qt的定義[EB/OL].2016-06-17.https：//baike.so.

com/doc/2150643-2275491.html

[2] 劉金鵬.linux入門很簡(jiǎn)單[M].清華大學(xué)出版社，2012.

[3] 王麗潔.嵌入式Linux的圖形界面技術(shù)研究與實(shí)現(xiàn)[D].國(guó)防科

技技術(shù)大學(xué)碩士學(xué)位論文，2006.

[4] 道客巴巴.嵌入式圖形界面Qt-Linux編譯環(huán)境搭建工作

[EB/OL].2013-03-08.http：//www.doc88.com/p-

8179991960600.html

[5] 韓少云，奚海蛟，諶利.嵌入式Linux的Qt圖形程序?qū)崙?zhàn)開發(fā)[M].

北京航空航天大學(xué)出版社，2012.

[6] 沙祥.嵌入式系統(tǒng)與Qt程序開發(fā)[M].機(jī)械工業(yè)，2017.