【翻譯】Qt Tutorial 3 - Family Values

．tutorials/tutorial/t3/main.cpp
．tutorials/tutorial/t3/t3.pro

　　這個範例展示了如何建立父元件(parent widget)及子元件(child widget)。



　　我們將要保持它的簡單性，只使用一個單獨的父元件及一個獨立的子元件。

 #include <QApplication>
 #include <QFont>
 #include <QPushButton>
 #include <QWidget>

 int main(int argc, char *argv[])
 {
     QApplication app(argc, argv);

     QWidget window;
     window.resize(200, 120);

     QPushButton quit("Quit", &window);
     quit.setFont(QFont("Times", 18, QFont::Bold));
     quit.setGeometry(10, 40, 180, 40);
     QObject::connect(&quit, SIGNAL(clicked()), &app, SLOT(quit()));

     window.show();
     return app.exec();
 }

Line by Line Walkthrough

 #include <QWidget>

　　我們加入了一行 <QWidget> 的引括，以獲取我們將要使用的基礎元件類別。

     QWidget window;

　　我們簡單的建立了一個樸素的元件物件。這個 QWidget 是所有使用者介面物件的基礎。元件是使用者介面的一小部分：其由視窗系統接收滑鼠、鍵盤及其他事件，並自己於螢幕上繪出圖像。一個元件會被其父元件與置於其上的元件所修剪(clip)。

　　像是這個特殊的元件，一個沒有被嵌入在父元件中的元件，被稱做一個視窗(window)。通常，視窗都擁有視窗系統所提供的外框及工作列(taskbar)。一個沒有父元件的元件就是一個獨立的視窗。其於螢幕上的最初位置是由視窗系統所控制的。

     window.resize(200, 120);

　　我們設定 window 的寬為 200 像素(pixel)、高為 120 像素。

     QPushButton quit("Quit", &window);

　　一個孩子(child)誕生了。這個 QPushButton 在建立的同時指定了它的父元件(window)。一個子元件總是顯示在父元件的區域裡面。在顯示的時候，它會被其父元件的邊界修剪。根據預設值，它會被放置在其父類別的左上角，(0, 0)的位置。

     quit.setGeometry(10, 40, 180, 40);

　　QWidget::setGeometry() 函式共有四個引數：前面兩個引數是這個按鈕左上角的 x 跟 y 坐標。這個座標是相對於父元件的。而後面兩個引數是這個按鈕的寬度及高度。結果就是這個按鈕從 (10, 40) 延伸到 (190, 80)。

     window.show();

　　當父元件被顯示時，它將會呼叫所有子元件的 show 函式(除非它們已經使用 QWidget::hide() 明確指定為隱藏)。


On being mindful of the order of things

　　已經學過 QObject 的指導教學讀者們，可以回想當 QObject 的解構子(destructor)被呼叫時，假如這個 QObject 擁有子元件，它的解構子會自動呼叫它每個子元件的解構子。於是，QPushButton quit 的解構子在 main() 結束時似乎被呼叫了兩次。第一次是由於 quit 為其父元件 window 的子元件，所以在 window 離開視野(scope)時，window 的解構子會去刪除它；而第二次則是在 quit 自己離開視野時。不過不需要為這種情況擔心，這個程式碼是正確的。然而，這是一個你必須要去留意堆疊(stack)中物件解構子層級(order)的地方。在 note on the order of construction/destruction of QObjects 中可以看到這方面的說明。


Running the Application

　　這個按鈕不再充滿整個視窗。相反地，因為呼叫 QWidget::setGeometry() 的緣故，它保持在視窗中 (10, 40) 的位置，且大小為 (180, 40)。


Exercises

　　試著改變視窗大小。這個按鈕有什麼改變？若是你在執行這支程式時，使用比較大的字體，這個按鈕的高度怎麼了？如果你試著讓這個視窗變得非常小，又發生什麼事了呢？

來源：Qt Tutorial 3 - Family Values
版本：4.4.3