C++ 入門指南 - QGridLayout

C++ 入門指南 - QGridLayout

QGridLayout 的作法是把視窗分成一個一個的格子 (grid) ，然後把小工具 (widget) 放到選定的格子中，可依視窗元件的大小設定佔用的格子數

當建立 QGridLayout 排版物件 (object) 後，利用 addWidget() 方法加入小工具物件時，第一個參數 (parameter) 為小工具物件，其後兩個參數為小工具在視窗中的座標，若需要佔用多個格子，例如向右延伸多格，就得提供更多的參數。


我們設置一個 GUIDemo 專案，標頭檔 GUIDemo.h 如下

#ifndef GUIDEMO_H
#define GUIDEMO_H

#include <QWidget>

class QLabel;
class QLineEdit;
class QPushButton;

class GUIDemo : public QWidget {
    Q_OBJECT

public :
    GUIDemo(QWidget *parent = 0);

private :
    QLabel *display;
    QLineEdit *inputField;
    QLineEdit *outputField;
    QPushButton *newButton;
    QPushButton *loadButton;
    QPushButton *saveButton;
    QPushButton *encodeButton;
    QPushButton *decodeButton;
    QPushButton *clearButton;
    QPushButton *copyButton;
};

#endif

/* 《程式語言教學誌》的範例程式
    http://pydoing.blogspot.com/
    檔名：GUIDemo.h
    功能：示範 C++ 程式
    作者：張凱慶
    時間：西元 2012 年 10 月 */

這裡把十個小工具設計成 GUIDemo 的變數成員 (variable member) ，這是因為這些小工具會與使用者的鍵盤輸入或滑鼠點擊產生反應。其他還有兩個 QLabel ，也就是放在 inputField 與 outputField 之前  Input:  與  Output:  ，因為與使用者操作無關，所以我們在建構子 (constructor) 中再建立就可以了。


實作檔 GUIDemo.cpp 如下

#include <QtGui>
#include "GUIDemo.h"

GUIDemo::GUIDemo(QWidget *parent) : QWidget(parent) {
    QLabel *input = new QLabel(tr( "Input:" ));
    QLabel *output = new QLabel(tr( "Output:" ));
    display = new QLabel(tr( "something happened" ));

    inputField = new QLineEdit;
    outputField = new QLineEdit;
    outputField->setReadOnly( true );

    newButton = new QPushButton(tr( "New" ));
    loadButton = new QPushButton(tr( "Load" ));
    saveButton = new QPushButton(tr( "Save" ));
    encodeButton = new QPushButton(tr( "Encode" ));
    decodeButton = new QPushButton(tr( "Decode" ));
    clearButton = new QPushButton(tr( "Clear" ));
    copyButton = new QPushButton(tr( "Copy" ));

    QGridLayout *layout = new QGridLayout;

    layout->addWidget(input, 0, 0);
    layout->addWidget(inputField, 0, 1, 1, 6, 0);

    layout->addWidget(output, 1, 0);
    layout->addWidget(outputField, 1, 1, 1, 6, 0);

    layout->addWidget(newButton, 2, 0);
    layout->addWidget(loadButton, 2, 1);
    layout->addWidget(saveButton, 2, 2);
    layout->addWidget(encodeButton, 2, 3);
    layout->addWidget(decodeButton, 2, 4);
    layout->addWidget(clearButton, 2, 5);
    layout->addWidget(copyButton, 2, 6);

    layout->addWidget(display, 3, 0, 1, 7, 0);

    setLayout(layout);
    setWindowTitle(tr( "GUIDemo" ));
}

/* 《程式語言教學誌》的範例程式
    http://pydoing.blogspot.com/
    檔名：GUIDemo.cpp
    功能：示範 C++ 程式
    作者：張凱慶
    時間：西元 2012 年 10 月 */

我們先看到第 11 行

outputField->setReadOnly( true );

由於我們不想要使用者在 outputField 輸入任何資料，因此建立完 outputField 呼叫 setReadOnly() ，將其設定成唯讀狀態。


然後看到 addWidget() 的部份，左上角第一格座標為 (0, 0) ，也就是第一橫列第一直行的位置，而第一橫列第一直行的座標為 (0, 1) ，第二橫列第一直行的座標為 (1, 0) ，第二橫列第二直行的座標為 (1, 1) ，餘下可類推

layout->addWidget(input, 0, 0);
layout->addWidget(inputField, 0, 1, 1, 6);

layout->addWidget(output, 1, 0);
layout->addWidget(outputField, 1, 1, 1, 6);

layout->addWidget(newButton, 2, 0);
layout->addWidget(loadButton, 2, 1);
layout->addWidget(saveButton, 2, 2);
layout->addWidget(encodeButton, 2, 3);
layout->addWidget(decodeButton, 2, 4);
layout->addWidget(clearButton, 2, 5);
layout->addWidget(copyButton, 2, 6);

layout->addWidget(display, 3, 0, 1, 7);

當格數需要跨越多行時，就需要額外提供三個參數，例如 display 在第四橫列第一直行，因此第二個參數為 3 ，第三個參數為 0 ，第四個參數為垂直延伸格數，此處為 1 ，第五個參數為水平延伸格數，此處為 7 

layout->addWidget(display, 3, 0, 1, 7);

概念很簡單吧！ GUIDemo 專案的 main.cpp 如下

#include <QtGui>
#include "GUIDemo.h"

int main( int argv, char **args)
{
    QApplication app(argv, args);

    GUIDemo demo;
    demo.show();

    return app.exec();
}

/* 《程式語言教學誌》的範例程式
    http://pydoing.blogspot.com/
    檔名：main.cpp
    功能：示範 C++ 程式
    作者：張凱慶
    時間：西元 2012 年 10 月 */

編譯執行結果如下