C++ 入門指南 - 排版管理

Qt 有數種版面編排方式，相關類別 (class) 如下

• QBoxLayout
• QButtonGroup
• QFormLayout
• QGraphicsAnchor
• QGraphicsAnchorLayout
• QGridLayout
• QGroupBox
• QHBoxLayout
• QLayout
• QLayoutItem
• QSizePolicy
• QSpacerItem
• QStackedLayout
• QStackedWidget
• QVBoxLayout
• QWidgetItem

QVBoxLayout 為垂直一格一格的排版樣式，而 QHBoxLayout 則是水平一格一格的排版樣式，舉例如下

#ifndef DEMO3_H
#define DEMO3_H

#include <QWidget>

class QPushButton;

class Demo3 : public QWidget {
    Q_OBJECT

public:
    Demo3(QWidget *parent = 0);
};

#endif

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

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

Demo3::Demo3(QWidget *parent) : QWidget(parent) {
    QPushButton *b1, *b2, *b3, *b4, *b5;
    b1 = new QPushButton(tr("b1"));
    b2 = new QPushButton(tr("b2"));
    b3 = new QPushButton(tr("b3"));
    b4 = new QPushButton(tr("b4"));
    b5 = new QPushButton(tr("b5"));
    
    QHBoxLayout *layout = new QHBoxLayout;
    layout->addWidget(b1);
    layout->addWidget(b2);
    layout->addWidget(b3);
    layout->addWidget(b4);
    layout->addWidget(b5);
    
    setLayout(layout);
    setWindowTitle(tr("Demo3"));
}

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

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

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

    Demo3 demo;
    demo.show();

    return app.exec();
}

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

編譯執行 Demo3 ，結果如下



其他常見的像是一列兩欄的 QFormLayout ，可供輸入表單之用，舉例如下

#ifndef DEMO4_H
#define DEMO4_H

#include <QWidget>

class QPushButton;
class QLineEdit;

class Demo4 : public QWidget {
    Q_OBJECT

public:
    Demo4(QWidget *parent = 0);
};

#endif

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

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

Demo4::Demo4(QWidget *parent) : QWidget(parent) {
    QPushButton *b1, *b2;
    QLineEdit *c1, *c2;
    b1 = new QPushButton(tr("b1"));
    c1 = new QLineEdit;
    b2 = new QPushButton(tr("b2"));
    c2 = new QLineEdit;
    
    QFormLayout *layout = new QFormLayout;
    layout->addRow(b1, c1);
    layout->addRow(b2, c2);
    
    setLayout(layout);
    setWindowTitle(tr("Demo4"));
}

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

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

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

    Demo4 demo;
    demo.show();

    return app.exec();
}

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

編譯執行 Demo4 ，結果如下



我們需要的版面設計會比這些再複雜一點，就是格子式的 QGridLayout !

中英文術語對照
類別	class

您可以繼續參考

GUI 篇

• GUI 的基本概念
• 排版管理
• QGridLayout
• SIGNAL 與 SLOT
• QString
• 整合 Encrypt
• 存檔與載入
• 完成版的 GUIDemo
• 下一步

相關目錄

回 C++ 入門指南
回 C++ 教材目錄
回首頁

參考資料

Qt Developer Network
Layout Management