Qt4 中的布局管理 · ZetCode 中文系列教程

# Qt4 中的布局管理 > 原文： [http://zetcode.com/gui/qt4/layoutmanagement/](http://zetcode.com/gui/qt4/layoutmanagement/) 在 Qt4 編程教程的這一部分中，我們將討論小部件的布局管理。典型的應用由各種小部件組成。這些小部件放置在布局內。程序員必須管理應用的布局。在 Qt4 中，我們有兩個選擇： * 絕對定位 * 布局管理器 ## 絕對定位程序員以像素為單位指定每個小部件的位置和大小。當使用絕對定位時，我們必須了解幾件事。 * 如果我們調整窗口大小，則小部件的大小和位置不會改變。 * 在各種平臺上，應用看起來有所不同（通常很差）。 * 在我們的應用中更改字體可能會破壞布局。 * 如果決定更改布局，則必須完全重做布局，這既繁瑣又耗時。在某些情況下，我們可能會使用絕對定位。但是大多數情況下，在實際程序中，程序員使用布局管理器。 `absolute.cpp` ```cpp #include <QApplication> #include <QDesktopWidget> #include <QTextEdit> class Absolute : public QWidget { public: Absolute(QWidget *parent = 0); }; Absolute::Absolute(QWidget *parent) : QWidget(parent) { QTextEdit *ledit = new QTextEdit(this); ledit->setGeometry(5, 5, 200, 150); } int main(int argc, char *argv[]) { QApplication app(argc, argv); Absolute window; window.setWindowTitle("Absolute"); window.show(); return app.exec(); } ``` `setGeometry()`方法用于以絕對坐標將窗口小部件放置在窗口上。 ```cpp QTextEdit *edit = new QTextEdit(this); edit->setGeometry(5, 5, 200, 150); ``` 我們創建一個`QTextEdit`小部件并手動定位。 `setGeometry()`方法有兩件事：將窗口小部件定位到絕對坐標并調整窗口小部件的大小。 ![Before resizement](https://img.kancloud.cn/49/01/4901fbdab44664e3ea183fb356efaddf_220x189.jpg) 圖：調整大小前 ![After resizement](https://img.kancloud.cn/db/2c/db2cbd04d538f1985b6eaeb4563eef01_401x220.jpg) 圖：調整大小后 ## `QVBoxLayout` `QVBoxLayout`類垂直排列小部件。使用`addWidget()`方法將小部件添加到布局。 `verticalbox.h` ```cpp #pragma once #include <QWidget> class VerticalBox : public QWidget { public: VerticalBox(QWidget *parent = 0); }; ``` 頭文件。 `verticalbox.cpp` ```cpp #include "verticalbox.h" #include <QVBoxLayout> #include <QPushButton> VerticalBox::VerticalBox(QWidget *parent) : QWidget(parent) { QVBoxLayout *vbox = new QVBoxLayout(this); vbox->setSpacing(1); QPushButton *settings = new QPushButton("Settings", this); settings->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding); QPushButton *accounts = new QPushButton("Accounts", this); accounts->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding); QPushButton *loans = new QPushButton("Loans", this); loans->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding); QPushButton *cash = new QPushButton("Cash", this); cash->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding); QPushButton *debts = new QPushButton("Debts", this); debts->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding); vbox->addWidget(settings); vbox->addWidget(accounts); vbox->addWidget(loans); vbox->addWidget(cash); vbox->addWidget(debts); setLayout(vbox); } ``` 在我們的示例中，我們有一個垂直布局管理器。我們在其中放入了五個按鈕。我們使所有按鈕都可以在兩個方向上展開。 ```cpp QVBoxLayout *vbox = new QVBoxLayout(this); vbox->setSpacing(1); ``` 我們創建`QVBoxLayout`并在子窗口小部件之間設置 1px 的間距。 ```cpp QPushButton *settings = new QPushButton("Settings", this); settings->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding); ``` 我們創建一個按鈕并為其設置大小策略。子窗口小部件由布局管理器管理。默認情況下，按鈕水平擴展，垂直方向固定大小。如果要更改它，我們將設置一個新的大小策略。在我們的例子中，按鈕可以向兩個方向擴展。 ```cpp vbox->addWidget(settings); vbox->addWidget(accounts); ... ``` 我們使用`addWidget()`方法將子窗口小部件添加到布局管理器。 ```cpp setLayout(vbox); ``` 我們為窗口設置`QVBoxLayout`管理器。 `main.cpp` ```cpp #include "verticalbox.h" #include <QApplication> int main(int argc, char *argv[]) { QApplication app(argc, argv); VerticalBox window; window.resize(240, 230); window.setWindowTitle("VerticalBox"); window.show(); return app.exec(); } ``` 主文件。 ![QVBoxLayout](https://img.kancloud.cn/27/ad/27ad92d8e98ddf003aabf093901d68aa_242x256.jpg) 圖：`QVBoxLayout` ## 按鈕在下面的示例中，我們在窗口的客戶區域上顯示兩個按鈕。它們將位于窗口的右下角。 `buttons.h` ```cpp #pragma once #include <QWidget> #include <QPushButton> class Buttons : public QWidget { public: Buttons(QWidget *parent = 0); private: QPushButton *okBtn; QPushButton *applyBtn; }; ``` 頭文件。 `buttons.cpp` ```cpp #include "buttons.h" #include <QVBoxLayout> #include <QHBoxLayout> Buttons::Buttons(QWidget *parent) : QWidget(parent) { QVBoxLayout *vbox = new QVBoxLayout(this); QHBoxLayout *hbox = new QHBoxLayout(); okBtn = new QPushButton("OK", this); applyBtn = new QPushButton("Apply", this); hbox->addWidget(okBtn, 1, Qt::AlignRight); hbox->addWidget(applyBtn, 0); vbox->addStretch(1); vbox->addLayout(hbox); } ``` 假設我們想在窗口的右下角有兩個按鈕。 ```cpp QVBoxLayout *vbox = new QVBoxLayout(this); QHBoxLayout *hbox = new QHBoxLayout(); ``` 我們創建了兩個框布局管理器：一個垂直框布局管理器和一個水平框布局管理器。 ```cpp okBtn = new QPushButton("OK", this); applyBtn = new QPushButton("Apply", this); ``` 我們創建兩個按鈕。 ```cpp hbox->addWidget(okBtn, 1, Qt::AlignRight); hbox->addWidget(applyBtn, 0); ``` 這些按鈕位于水平布局管理器中。使用`addWidget()`方法。這些按鈕右對齊。第一個參數是子窗口小部件。第二個參數是拉伸因子，最后一個參數是對齊。通過將“確定”按鈕的拉伸因子設置為 1，我們在窗口的左側到右側留出一定的空間。窗口小部件不會擴展到分配給它的所有空間。最后，`Qt::AlignRight`常數將小部件對齊到分配空間的右側。 ```cpp vbox->addStretch(1); vbox->addLayout(hbox); ``` 通過調用`addStretch()`方法，我們在垂直框中放入了一個可擴展的空白區域。然后，將水平框布局添加到垂直框布局。 `main.cpp` ```cpp #include <QApplication> #include "buttons.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); Buttons window; window.resize(290, 170); window.setWindowTitle("Buttons"); window.show(); return app.exec(); } ``` 主文件。 ![Buttons](https://img.kancloud.cn/98/10/98109b2c4367e5f0d55aa66cf0111f66_292x196.jpg) 圖：按鈕 ## 嵌套布局以下示例的目的是說明可以合并布局管理器。通過甚至簡單布局的組合，我們可以創建復雜的對話框或窗口。要嵌套布局，我們利用`addLayout()`方法。 `layouts.h` ```cpp #pragma once #include <QWidget> class Layouts : public QWidget { public: Layouts(QWidget *parent = 0); }; ``` 頭文件。 `layouts.cpp` ```cpp #include <QVBoxLayout> #include <QPushButton> #include <QListWidget> #include "layouts.h" Layouts::Layouts(QWidget *parent) : QWidget(parent) { QVBoxLayout *vbox = new QVBoxLayout(); QHBoxLayout *hbox = new QHBoxLayout(this); QListWidget *lw = new QListWidget(this); lw->addItem("The Omen"); lw->addItem("The Exorcist"); lw->addItem("Notes on a scandal"); lw->addItem("Fargo"); lw->addItem("Capote"); QPushButton *add = new QPushButton("Add", this); QPushButton *rename = new QPushButton("Rename", this); QPushButton *remove = new QPushButton("Remove", this); QPushButton *removeall = new QPushButton("Remove All", this); vbox->setSpacing(3); vbox->addStretch(1); vbox->addWidget(add); vbox->addWidget(rename); vbox->addWidget(remove); vbox->addWidget(removeall); vbox->addStretch(1); hbox->addWidget(lw); hbox->addSpacing(15); hbox->addLayout(vbox); setLayout(hbox); } ``` 在示例中，我們創建一個窗口，該窗口由四個按鈕和一個列表小部件組成。這些按鈕被分組在一個垂直列中，并位于列表小部件的右側。如果我們調整窗口的大小，列表小部件也將被調整大小。 ```cpp QVBoxLayout *vbox = new QVBoxLayout(); ``` `QVBoxLayout`將是按鈕的列。 ```cpp QHBoxLayout *hbox = new QHBoxLayout(this); ``` `QHBoxLayout`將是小部件的基本布局。 ```cpp QListWidget *lw = new QListWidget(this); lw->addItem("The Omen"); lw->addItem("The Exorcist"); lw->addItem("Notes on a scandal"); lw->addItem("Fargo"); lw->addItem("Capote"); ``` `QListWidget`已創建。 ```cpp QPushButton *add = new QPushButton("Add", this); QPushButton *rename = new QPushButton("Rename", this); QPushButton *remove = new QPushButton("Remove", this); QPushButton *removeall = new QPushButton("Remove All", this); ``` 在這里，我們創建四個按鈕。 ```cpp vbox->setSpacing(3); vbox->addStretch(1); vbox->addWidget(add); vbox->addWidget(rename); vbox->addWidget(remove); vbox->addWidget(removeall); vbox->addStretch(1); ``` 創建帶有四個按鈕的垂直框。我們在按鈕之間留了一些空間。注意，我們在垂直框的頂部和底部添加了一個拉伸因子。這樣，按鈕可以垂直居中。 ```cpp hbox->addWidget(lw); hbox->addSpacing(15); hbox->addLayout(vbox); ``` 列表小部件和按鈕的垂直框放置在水平框布局中。 `addLayout()`方法用于將一個布局添加到另一個布局。 ```cpp setLayout(hbox); ``` 我們為父窗口設置基本布局。 `main.cpp` ```cpp #include <QApplication> #include "layouts.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); Layouts window; window.setWindowTitle("Layouts"); window.show(); return app.exec(); } ``` 主文件。 ![Layouts](https://img.kancloud.cn/12/d8/12d83029228b31765984c4d455caf60e_386x240.jpg) 圖：布局 ## `QFormLayout` `QFormLayout`是一個簡單的布局管理器，用于管理輸入窗口小部件及其相關標簽的形式。它以兩列的形式布置其子項。左列包含標簽，右列包含輸入窗口小部件，例如`QLineEdit`或`QSpinBox`。 `form.h` ```cpp #pragma once #include <QWidget> class FormEx : public QWidget { public: FormEx(QWidget *parent = 0); }; ``` 這是標題文件管理器。 `form.cpp` ```cpp #include "form.h" #include <QFormLayout> #include <QLabel> #include <QLineEdit> FormEx::FormEx(QWidget *parent) : QWidget(parent) { QLineEdit *nameEdit = new QLineEdit(this); QLineEdit *addrEdit = new QLineEdit(this); QLineEdit *occpEdit = new QLineEdit(this); QFormLayout *formLayout = new QFormLayout; formLayout->setLabelAlignment(Qt::AlignRight | Qt::AlignVCenter); formLayout->addRow("Name:", nameEdit); formLayout->addRow("Email:", addrEdit); formLayout->addRow("Age:", occpEdit); setLayout(formLayout); } ``` 該示例創建一個包含三個標簽和三個行編輯的表單。 ```cpp QFormLayout *formLayout = new QFormLayout; ``` 創建`QFormLayout`的實例。 ```cpp formLayout->setLabelAlignment(Qt::AlignRight | Qt::AlignVCenter); ``` 使用`setLabelAlignment()`方法，我們設置標簽小部件的對齊方式。 ```cpp formLayout->addRow("Name:", nameEdit); ``` `addRow()`方法將新行添加到表單布局的底部，并帶有給定的標簽和輸入小部件。 `main.cpp` ```cpp #include <QApplication> #include "form.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); FormEx window; window.setWindowTitle("Form example"); window.show(); return app.exec(); } ``` 主文件。 ![Simple form](https://img.kancloud.cn/38/c5/38c59d90f539f9a2e23af812f934ca4a_202x141.jpg) 圖：簡單 form ## `QGridLayout` `QGridLayout`將其小部件放置在網格中。它是一個功能強大的布局管理器。 `calculator.h` ```cpp #pragma once #include <QWidget> class Calculator : public QWidget { public: Calculator(QWidget *parent = 0); }; ``` 這是頭文件。 `calculator.cpp` ```cpp #include <QGridLayout> #include <QPushButton> #include "calculator.h" Calculator::Calculator(QWidget *parent) : QWidget(parent) { QGridLayout *grid = new QGridLayout(this); grid->setSpacing(2); QList<QString> values({ "7", "8", "9", "/", "4", "5", "6", "*", "1", "2", "3", "-", "0", ".", "=", "+" }); int pos = 0; for (int i=0; i<4; i++) { for (int j=0; j<4; j++) { QPushButton *btn = new QPushButton(values[pos], this); btn->setFixedSize(40, 40); grid->addWidget(btn, i, j); pos++; } } setLayout(grid); } ``` 我們創建計算器的骨架。 ```cpp QGridLayout *grid = new QGridLayout(this); grid->setSpacing(2); ``` 我們創建網格布局，并在子小部件之間設置 2px 的空間。 ```cpp QList<QString> values({ "7", "8", "9", "/", "4", "5", "6", "*", "1", "2", "3", "-", "0", ".", "=", "+" }); ``` 這些是按鈕上顯示的字符。 ```cpp for (int i=0; i<4; i++) { for (int j=0; j<4; j++) { QPushButton *btn = new QPushButton(values[pos], this); btn->setFixedSize(40, 40); grid->addWidget(btn, i, j); pos++; } } ``` 我們將十六個小部件放置到網格布局中。每個按鈕將具有固定的大小。 `main.cpp` ```cpp #include <QApplication> #include "calculator.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); Calculator window; window.move(300, 300); window.setWindowTitle("Calculator"); window.show(); return app.exec(); } ``` 這是主文件。 ![QGridLayout](https://img.kancloud.cn/2f/90/2f908d1ea908287deccd618df5859238_190x214.jpg) 圖：`QGridLayout` ## 回顧在本章的下一個示例中，我們使用`QGridLayout`管理器創建一個更復雜的窗口。 `review.h` ```cpp #pragma once #include <QWidget> class Review : public QWidget { public: Review(QWidget *parent = 0); }; ``` 頭文件。 `review.cpp` ```cpp #include "review.h" #include <QGridLayout> #include <QLabel> #include <QLineEdit> #include <QTextEdit> Review::Review(QWidget *parent) : QWidget(parent) { QGridLayout *grid = new QGridLayout(this); grid->setVerticalSpacing(15); grid->setHorizontalSpacing(10); QLabel *title = new QLabel("Title:", this); grid->addWidget(title, 0, 0, 1, 1); title->setAlignment(Qt::AlignRight | Qt::AlignVCenter); QLineEdit *edt1 = new QLineEdit(this); grid->addWidget(edt1, 0, 1, 1, 1); QLabel *author = new QLabel("Author:", this); grid->addWidget(author, 1, 0, 1, 1); author->setAlignment(Qt::AlignRight | Qt::AlignVCenter); QLineEdit *edt2 = new QLineEdit(this); grid->addWidget(edt2, 1, 1, 1, 1); QLabel *review = new QLabel("Review:", this); grid->addWidget(review, 2, 0, 1, 1); review->setAlignment(Qt::AlignRight | Qt::AlignTop); QTextEdit *te = new QTextEdit(this); grid->addWidget(te, 2, 1, 3, 1); setLayout(grid); } ``` 該代碼創建了一個窗口，可用于輸入作者，書名和書評。 ```cpp QGridLayout *grid = new QGridLayout(this); ``` `QGridLayout`管理器已創建。 ```cpp grid->setVerticalSpacing(15); grid->setHorizontalSpacing(10); ``` 我們使用`setVerticalSpacing()`方法添加垂直間距，并使用`setHorizontalSpacing()`方法添加水平間距。 ```cpp QLabel *title = new QLabel("Title", this); grid->addWidget(title, 0, 0, 1, 1); ``` 這些代碼行創建一個標簽小部件，并將其放入網格布局中。 `addWidget()`方法具有五個參數。第一個參數是子窗口小部件，在本例中為標簽。接下來的兩個參數是放置標簽的網格中的行和列。最后，最后一個參數是`rowspan`和`colspan`。這些參數指定當前窗口小部件將跨越多少行。在我們的情況下，標簽將僅跨越一列和一行。 ```cpp title->setAlignment(Qt::AlignRight | Qt::AlignVCenter); ``` `setAlignment()`方法將標題標簽對準其單元格。在水平方向上，它是右對齊的。在垂直方向上，它居中。 ```cpp QTextEdit *te = new QTextEdit(this); grid->addWidget(te, 2, 1, 3, 1); ``` `QTextEdit`小部件位于第三行和第二列；它跨越三行一列。 `main.cpp` ```cpp #include <QApplication> #include "review.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); Review window; window.setWindowTitle("Review"); window.show(); return app.exec(); } ``` 主文件。 ![Review](https://img.kancloud.cn/f3/12/f312c1a04c433d49b6169eaedc839604_335x324.jpg) 圖：回顧 Qt4 教程的這一部分專門用于布局管理。