2月 05, 2009

【翻譯】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);



  與 QHBoxLayoutQVBoxLayout 相同,Qt 也提供了 QGridLayoutQFormLayout 類別來輔助更複雜的使用者介面。


來源:Widgets Tutorial
版本:4.4.3

0 回覆:

張貼留言