【翻譯】Qt Tutorial 6 - Building Blocks Galore!

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

　　這個範例展示了如何封裝兩個元件成一個新的組件，以及使用許多元件有多麼容易。首先，我們使用一個自訂的元件作為一個子元件。

 #include <QApplication>
 #include <QFont>
 #include <QGridLayout>
 #include <QLCDNumber>
 #include <QPushButton>
 #include <QSlider>
 #include <QVBoxLayout>
 #include <QWidget>

 class LCDRange : public QWidget
 {
 public:
     LCDRange(QWidget *parent = 0);
 };

 LCDRange::LCDRange(QWidget *parent)
     : QWidget(parent)
 {
     QLCDNumber *lcd = new QLCDNumber(2);
     lcd->setSegmentStyle(QLCDNumber::Filled);

     QSlider *slider = new QSlider(Qt::Horizontal);
     slider->setRange(0, 99);
     slider->setValue(0);
     connect(slider, SIGNAL(valueChanged(int)),
             lcd, SLOT(display(int)));

     QVBoxLayout *layout = new QVBoxLayout;
     layout->addWidget(lcd);
     layout->addWidget(slider);
     setLayout(layout);
 }

 class MyWidget : public QWidget
 {
 public:
     MyWidget(QWidget *parent = 0);
 };

 MyWidget::MyWidget(QWidget *parent)
     : QWidget(parent)
 {
     QPushButton *quit = new QPushButton(tr("Quit"));
     quit->setFont(QFont("Times", 18, QFont::Bold));
     connect(quit, SIGNAL(clicked()), qApp, SLOT(quit()));

     QGridLayout *grid = new QGridLayout;
     for (int row = 0; row < 3; ++row) {
         for (int column = 0; column < 3; ++column) {
             LCDRange *lcdRange = new LCDRange;
             grid->addWidget(lcdRange, row, column);
         }
     }

     QVBoxLayout *layout = new QVBoxLayout;
     layout->addWidget(quit);
     layout->addLayout(grid);
     setLayout(layout);
 }

 int main(int argc, char *argv[])
 {
     QApplication app(argc, argv);
     MyWidget widget;
     widget.show();
     return app.exec();
 }

Line by Line Walkthrough

 class LCDRange : public QWidget
 {
 public:
     LCDRange(QWidget *parent = 0);
 };

　　LCDRange 是一個沒有任何 API 的元件。它只有一個建構子。這種元件不是很有用，所以稍後我們將會加入一些 API。

 LCDRange::LCDRange(QWidget *parent)
     : QWidget(parent)
 {
     QLCDNumber *lcd = new QLCDNumber(2);
     lcd->setSegmentStyle(QLCDNumber::Filled);

     QSlider *slider = new QSlider(Qt::Horizontal);
     slider->setRange(0, 99);
     slider->setValue(0);
     connect(slider, SIGNAL(valueChanged(int)),
             lcd, SLOT(display(int)));

     QVBoxLayout *layout = new QVBoxLayout;
     layout->addWidget(lcd);
     layout->addWidget(slider);
     setLayout(layout);
 }

　　這裡直接抄襲了第五章的 MyWidget 建構子。唯一的不同是省略了 Quit 按紐，而且這個類別被重新命名了。

 class MyWidget : public QWidget
 {
 public:
     MyWidget(QWidget *parent = 0);
 };

　　MyWidget 同樣除了建構子之外沒有其他 API。

 MyWidget::MyWidget(QWidget *parent)
     : QWidget(parent)
 {
     QPushButton *quit = new QPushButton(tr("Quit"));
     quit->setFont(QFont("Times", 18, QFont::Bold));
     connect(quit, SIGNAL(clicked()), qApp, SLOT(quit()));

　　這個過去在改名為 LCDRange 類別裡的按鈕被分隔出來，如此我們便可以有一個 Quit 按紐以及許多 LCDRange 物件。

     QGridLayout *grid = new QGridLayout;

　　我們建立了一個將會包含三行(column)的 QGridLayout。

　　QGridLayout 會自動把它的元件排列到列(row)與行中。你可以在加入元件時指定列數及行數，而 QGridLayout 將會把它們設置在網格(grid)中。

     for (int row = 0; row < 3; ++row) {
         for (int column = 0; column < 3; ++column) {
             LCDRange *lcdRange = new LCDRange;
             grid->addWidget(lcdRange, row, column);
         }
     }

　　我們建立了九個 LCDRange 元件，它們全都是網格物件的子元件，我們將它們排列成三行三列。

     QVBoxLayout *layout = new QVBoxLayout;
     layout->addWidget(quit);
     layout->addLayout(grid);
     setLayout(layout);
 }

　　最後，我們將 Quit 按紐以及包含 LCDRange 元件的網格版面配置加入到主版面配置中。QWidget::addLayout() 函式類似於 QWidget::addWidget() 函式，使特定的版面配置成為一個主版面配置的子配置。

　　就是這樣。


Running the Application

　　這支程式顯示了同時使用許多元件有多麼容易。其中每一個元件的行為都像是前一章裡的 LCD 數字與滾動軸。再一次地，它們的不同點在於實現。


Exercises

　　在開始時初始化每一個滾動軸為不同 / 隨機的值。

來源：Qt Tutorial 6 - Building Blocks Galore!
版本：4.4.3