【翻譯】Widgets Tutorial

Introduction

　　元件(widget)是使用 Qt 製作圖形使用者介面(GUI，Graphical User Interface)應用程式的基礎。每一個 GUI 組件(component)－－像是一個按鈕(button)、標籤(label)或是文字編輯器(text editor)－－都是一個元件，並且可以被放置在一個已存在的使用者介面中，或是作為一個獨立的視窗(window)被顯示。每一類型的組件都由 QWidget 的特定子類別(subclass)所提供，而 QWidget 本身則為 QObject 的子類別。

　　QWidget 不是一個抽象類別(abstract class)；它可以被用來當作其他元件的容器(container)，而且可以用最少的努力子類別化(subclassed)以建立自訂的元件。建立其他元件所放置的視窗是相當常見的。

　　與 QObject 相同，元件可以於建立時指定父物件(parent object)以表明所有權(ownership)，確保物件在不再使用時都會被刪除。對元件來說，這些父子關係還具有額外的意義：每個子元件都是被顯示在其父元件的螢幕區域中。這表示，當一個視窗被刪除，所有它所包含的元件都會自動被刪除。


Creating a Window

　　若是一個元件被建立時沒有父元件，當它顯示時就可以把它看做是一個視窗(window)、或是一個頂層元件(top-level widget)。由於它並沒有父物件以確保它將會在不再使用時被刪除，所以是否保留頂層元件就取決於應用程式的開發者了。

　　在接下來的範例，我們使用 QWidget 來建立、顯示一個採用預設大小的視窗：

     QWidget *window = new QWidget();
     window->resize(320, 240);
     window->show();

　　我們可以藉由將 window 作為父元件傳遞到元件建構子的方式來加入一個子元件。在這個例子裡，我們將一個按鈕加入到 window 中，並將之放置到指定位置：

     QPushButton *button = new QPushButton(tr("Press me"), window);
     button->move(100, 100);
     button->show();

　　這個按鈕現在是 window 的子元件了，而且它將會在視窗毀滅的時候被刪除。注意，隱藏或是關閉視窗並不會自動毀滅它。


Using Layouts

　　通常，子元件並不是以明確指定位置和大小的方式來排列在視窗中的，而是使用版面配置(layout)。這裡我們建立了一個標籤(label)與一個單行文字框元件，我們想要一步一步地排列它們。

     QLabel *label = new QLabel(tr("Name:"));
     QLineEdit *lineEdit = new QLineEdit();

     QHBoxLayout *layout = new QHBoxLayout();
     layout->addWidget(label);
     layout->addWidget(lineEdit);
     window->setLayout(layout);

　　我們建立出來的 layout 物件管理了由 addWidget() 函式提供給它的元件的位置以及大小。而版面配置自身則是在 setLayout()的呼叫中被提供給視窗。版面配置只有經由它們所負責管理的元件(與其它版面配置)影響才是可見的。

　　在上面的範例中，每個元件的所有權都不是很清楚。由於我們建立了沒有父物件的元件與版面配置，我們預期會看到一個空視窗、與兩個分別包含一個標籤與一個單行文字框的視窗。然而，當我們告知版面配置以管理標籤與單行文字框，並將版面配置設置在視窗中，這些元件與版面配置本身都會「重新定義父元件(reparented)」成 window 的子元件。

　　就像元件可以包含其他元件，版面配置可以被用來提供元件不同層級(level)的群組(grouping)。在這裡，我們想要讓一個並排在單行文字框的標籤顯示在一個視窗的頂端、以及一個顯示了查詢結果的表格上面。

     QLabel *queryLabel = new QLabel(tr("Query:"));
     QLineEdit *queryEdit = new QLineEdit();
     QTableView *resultView = new QTableView();

     QHBoxLayout *queryLayout = new QHBoxLayout();
     queryLayout->addWidget(queryLabel);
     queryLayout->addWidget(queryEdit);

     QVBoxLayout *mainLayout = new QVBoxLayout();
     mainLayout->addLayout(queryLayout);
     mainLayout->addWidget(resultView);
     window->setLayout(mainLayout);

　　與 QHBoxLayout 和 QVBoxLayout 相同，Qt 也提供了 QGridLayout 和 QFormLayout 類別來輔助更複雜的使用者介面。

來源：Widgets Tutorial
版本：4.4.3