快快樂樂學 QT - 第一章 Getting Started (2)

Making Connections

在下一個例子當中，將會告訴我們如何對使用者的動作做出回應。這個程式包含了一個按鈕，當使用者點了這個按鈕之後，程式就會離開。這個程式跟 Hello 這隻相當類似，主要差別在於我們用 QPushButton 來代替 QLabel以下是範例：

1  #include <qapplication.h>
2  #include <qpushbutton.h>

3  int main( int argc, char *argv[] )
4  {
5      QApplication app(argc, argv) ;
6      QPushButton *button = new QPushButton("Quit", 0) ;
7      QObject::connect(button, SIGNAL( clicked() ),
8                               &app, SLOT( quit() )) ;
9      app.setMainWidget(button) ;
10     button->show() ;
11     return app.exec() ;
12 }

QT 的 widget 透過 signals 表示使用者的動作或者是狀態的改變。舉例來說，QPushButton會在使用者按下按鈕的時候，發出一個 clicked() signal。Signal 可以跟 function 作連結（接下來這個 function 我們會稱作 slot），也就是說，當一個 signal 被發出的時候，slot 就會自動的被執行。

在我們的例子當中，我們把按鈕的 clicked() signal 跟 QApplication 物件的 quit() slot 做了連結，SIGNAL() 以及 SLOT() 這兩個 macros 是 Qt 語法的一部分，在下一章當中會有更詳細的解釋。

接著我們就來 build 並且執行這個程式，當程式執行之後，如果你按下了 Quit，或是按下空白鍵（代表按下 Quit 按鈕），你會發現程式會結束執行。

下一個例子則是展示了如何利用 signals 以及 slots 讓兩個 widget 同步，這個程式詢問使用者的年紀，使用者可以透過一個 spin box 或是 slider 來作輸入。 程式包含了三個 widgets：QSpinBox、QSlider、QHBox (horizontal layout box)。QHBox 是程式的 main widget，QSpinBox 以及 QSlider 被放在 QHBox 裡面，它們兩個是 QHBox 的 children。

1  #include <qapplication.h>
2  #include <qhbox.h>
3  #include <qslider.h>
4  #include <qspinbox.h>

5  int main( int argc, char *argv[] )
6  {
7      QApplication app(argc,argv) ;
8      QHBox *hbox = new QHBox(0) ;
9      hbox->setCaption("Enter Your Age") ;
10     hbox->setMargin(6) ;
11     hbox->setSpacing(6) ;

12     QSpinBox *spinBox = new QSpinBox(hbox) ;
13     QSlider *slider = new QSlider(Qt::Horizontal, hbox) ;
14     spinBox->setRange(0,130) ;
15     slider->setRange(0,130) ;

16     QObject::connect(spinBox, SIGNAL(valueChanged(int)),
17                              slider, SLOT(setValue(int))) ;
18     QObject::connect(slider, SIGNAL(valueChanged(int)),
19                              spinBox, SLOT(setValue(int))) ;
20     spinBox->setValue(35) ;
21     app.setMainWidget(hbox);
22     hbox->show() ;
23     return app.exec() ;
24  }

第 8 行到第 11 行我們對 QHBox 做了一些設定，我們在 QHBox 的外圍以及跟 child widget 之間留了一些空間 (6 pixels)。12 和 13 行我們產生了行我們產生了 QSpinBox 以及 QSlider 物件，並且把他們兩個的 parent 都設定為 QHBox。

儘管我們沒有明確設定這兩個 widget 的位置以及大小，我們仍然會發現 QSpinBox 還有 QSlider 在 QHBox 當中躺的好好的，這是因為 QHBox 會自動的給他的 child 合理的位置還有大小。Qt 提供了許多像是 QHBox 之類的 classes 讓我們不用刻意去指定 widget 的位置以及大小。

14 以及 15 行設定了 spin box 以及 slider 的合法範圍，16 到 19 行的兩個 connect 則是讓 spin box 以及 slider 作同步的動作，使他們兩個都會有相同的值。當任何一個 widget 的值改變，就會丟出 valueChanged(int) 的 signal，連接到另外一個 widget 的 setValue(int) slot，並且跟著改變值。

第 20 行把 spin box 的值設定為 35，當跑到這一行時，QSpinBox 發出了 valueChanged(int) 的 signal，並且還有一個值為 35 的 int argument。這個 arguemnt 會被傳到 QSlider 的 setValue(int) slot，把 slider 的值設成 35。接著 slider 又會因為 slider 的值改變了而送出一個 valueChanged(int) 的 signal，不過在這個時候，因為 spin box 的值已經是 35 了，所以不會有 setValue(int) 的發生。這樣可以避免無窮迴圈的狀況發生。

總結一下，Qt 建造使用者介面的方法相當簡單易懂而且有彈性，並且透過 layout，我們可以不用擔心 widget 的大小還有位置問題。UI 的行為則是透過 widget 之間的 signals 還有 slots 機制來作管理。

快快樂樂學 QT - 第一章 Getting Started (1)

這一章是我們簡介 QT 的開始，我們將會由一個最經典的 "Hello QT" 的例子，先讓大家看看 QT 的程式會長什麼樣子。在此，也會介紹兩個 QT 的概念："siganls and slots" 以及 layouts。

Hello Qt

那麼，先讓我們來看看 "Hello QT" 這個程式：

1  #include <qapplication.h>
2  #include <qlabel.h>

3  int main( int argc, char *argv[] )
4  {
5      QApplication app(argc, argv) ;
6      QLabel *label = new QLabel("Hello Qt!", 0) ;
7      app.setMainWidget(label) ;
8      label->show() ;
9      return app.exec() ;
10 }

第一、二行 include 了 QApplication 還有 QLabel 這兩個類別的 definitions，第五行建構了一個 QApplication 的物件來管理程式的資源，QApplication 的 constructor 需要 argc 以及 argv 當作參數。這是因為 QT 也支援了一些 command-line arguments。

第六行建構了顯示 "Hello Qt!" 的 QLabel widget，在 Qt 當中，一個 widget 指的就是一個 UI 上面的視覺元素。按鈕、選單、捲軸等等，都是 widget 的例子。Widget 當中也可以包含其他的 widgets，舉例來說，一個程式的視窗就是一個 widget，通常會包含 QMenuBar、QToolBar、QStatus，還有一些其他的 widget。後面傳給 QLabel constructor 的參數 0 (null pointer) 代表這個 widget 所在的視窗就是他自己，而不是一個在其他視窗當中的 widget。

第七行把 label 設定成程式的主要 widget，當使用者把主要 widget 關掉之後，程式就會結束。如果沒有設定主要 widget，程式會在關掉視窗之後依舊在背景一直執行。第八行讓 label 可以被看到，在 widgets 剛被建構的時候都是被設定為隱藏的，這樣我們可以在 widgets 被看到之前先對它們作設定。第九行把程式控制權傳給 Qt，在這個時候，程式進入到一種 stand-by 模式，等待使用者滑鼠、鍵盤等等的動作。

現在讓我們來測試一下程式吧！首先，我們需要先安裝 Qt3。我們假設你已經把 Qt3 裝好了，並且已經把 Qt 的 bin 目錄設定在你的 PATH 環境變數當中。

現在我們可以把這個程式取名叫做 hello.cpp，並且把他放在一個叫做 hello 的目錄當中。利用命令列，先切換你的目錄到 hello，打入

qmake -project

來創造一個跟平台無關的專案檔案 (hello.pro)，接著再打入

qmake hello.pro

來從專案檔案當中創造一個平台相關的 makefile，執行 make 來 build 這個程式，接著執行 hello，就會看到程式的結果跑出來。

接著讓我們再來試試看一些東西，我們可以在 label 上面動一些手腳，透過插入一些簡單的 HTML-style 標籤格式，只要把這行

QLabel *label = new QLabel("Hello Qt!", 0) ;

改成

QLabel *label = new QLabel("<h2><i>Hello</i> ""<font color=red>Qt!</font></h2>", 0) ;

然後再 rebuilding 這個程式就可以看到新的結果。

快快樂樂學 QT - 前言

我知道這個標題很蠢，不過一時之間我想不到什麼其他好標題 XD

這串文章主要是記錄一些我學習 QT 的心得，主要是依照 C++ GUI Programming with Qt3 的內容為主，然後會附上一些自己的心得。大致的把學習過程作個記錄，以後也可以給有需要的人稍微作個參考。在這裡，我還是會以 QT3 為主軸。原因很簡單，儘管 QT4 已經推出一段時間了，但是因為目前手上只有這本書，因此為了不必要的麻煩，就先以 QT3 為基準。等到整本書看的差不多之後，再去就兩個版本之間不同之處來作比較。