From Gossip@caterpillar

Qt4 Gossip: QGridLayout 版面配置

QGridLayout版面配置會如同棋盤般排列Widget，先來看個簡單的例子：

#include <QApplication>
#include <QWidget>
#include <QGridLayout>
#include <QLabel>

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

     const QString texts[] = {"One", "Two", "Three",
                              "Four", "Five", "Six",
                              "Seven", "Eight", "Nine"};

     QWidget *window = new QWidget;
     window->setWindowTitle("QGridLayout");
     window->resize(250, 100);
     
     QGridLayout *layout = new QGridLayout;
     layout->setSpacing(2);
     layout->setMargin(2);

     for(int i = 0, k = 0; i < 3; i++, k = k + 3) {
         for(int j = 0; j < 3; j++) {
             QLabel *label = new QLabel(texts[k + j]);
             label->setFrameStyle(QFrame::Panel + QFrame::Sunken);
             label->setMinimumSize(55, 0);
             label->setAlignment(Qt::AlignCenter);
             layout->addWidget(label, i, j);
         }
     }
 
     window->setLayout(layout);
     window->show();
     
     return app.exec();
}

在版面配置的程式碼部份，setSpacing()與setMargin()設定每一個Grid的空間與彼此之間的邊界，再來利用迴圈將QLabel加入QGridLayout，程式中設定了QLabel的最小尺寸、顯示位向與樣式，注意在使用addWidget()方法時，可以指定您要將元件加入至哪一列（Row）哪一行（Column）。

程式執行時的參考畫面如下：

QGridLayout中不一定要每個格子依序填滿，只要指定想填入的位置，沒有指定的部份會自動空下，以下的程式是個簡單的示範：

#include <QApplication>
#include <QWidget>
#include <QGridLayout>
#include <QLabel>

int main(int argc, char **argv) {
    QApplication app(argc, argv);
    
    QWidget *window = new QWidget;
    
    QGridLayout *layout = new QGridLayout;
    layout->setColumnMinimumWidth(0, 200);
    layout->setColumnMinimumWidth(1, 100);
    
    QLabel *label1 = new QLabel("One");
    label1->setFrameStyle(QFrame::Panel + QFrame::Sunken);
    QLabel *label3 = new QLabel("Three");
    label3->setFrameStyle(QFrame::Panel + QFrame::Sunken);
    QLabel *label5 = new QLabel("Five");
    label5->setFrameStyle(QFrame::Panel + QFrame::Sunken);
    
    layout->addWidget(label1, 0, 0);
    layout->addWidget(new QLabel("Two"), 1, 0);
    layout->addWidget(label3, 2, 0);
    layout->addWidget(new QLabel("Four"), 1, 1);
    layout->addWidget(label5, 2, 2);
    
    window->setLayout(layout);
    window->show();

    return app.exec();
}

您也可以使用setColumnMinimumWidth()來設定指定行的最小寬度，或使用setRowMinimumHeight()來設定指定列的最小高度，行列的索引都是由0開始，與二維陣列的指定方式相同。

程式的執行畫面如下所示：

利用指定行列置放元件的特性，您就可以進行如下的畫面設計：

（圖片取自Qt官方的 QGridLayout 類別說明）