# QtJambi 中的布局管理 > 原文： [http://zetcode.com/gui/qtjambi/layoutmanagement/](http://zetcode.com/gui/qtjambi/layoutmanagement/) 在 QtJambi 編程教程的這一部分中，我們將介紹布局管理器。 在設計應用的 GUI 時，我們決定要使用哪些組件以及如何在應用中組織這些組件。 為了組織我們的組件，我們使用專門的不可見對象，稱為布局管理器。 QtJambi 中有多個選項。 我們可以使用絕對定位，內置布局管理器或創建自定義布局管理器。 我們還可以使用 Qt Designer 直觀地構建布局。 QtJambi 具有一些重要的內置布局管理器。 `QVBoxLayout`類垂直排列小部件。 `QHBoxLayout`水平排列小部件。 `QGridLayout`類將小部件布置在網格中。 網格布局是最靈活的布局管理器。 盒子布局相互嵌套以創建復雜的布局。 ## 絕對定位 在大多數情況下，程序員應使用布局管理器。 在某些情況下，我們可以使用絕對定位。 在絕對定位中，程序員以像素為單位指定每個小部件的位置和大小。 如果我們調整窗口大小，則小部件的大小和位置不會改變。 在各種平臺上，應用看起來都不同，在 Linux 上看起來不錯，在 Mac OS 上看起來不太正常。 在我們的應用中更改字體可能會破壞布局。 如果我們將應用翻譯成另一種語言，則必須重做布局。 對于所有這些問題，僅在有理由時才使用絕對定位。 ```java package com.zetcode; import com.trolltech.qt.gui.QApplication; import com.trolltech.qt.gui.QLabel; import com.trolltech.qt.gui.QPixmap; import com.trolltech.qt.gui.QWidget; /** * ZetCode QtJambi tutorial * * In this program, we lay out widgets * using absolute positioning * * @author jan bodnar * website zetcode.com * last modified April 2009 */ public class JambiApp extends QWidget { public JambiApp() { setWindowTitle("Absolute"); initUI(); resize(300, 280); move(300, 300); show(); } private void initUI() { setStyleSheet("QWidget { background-color: #414141 }"); QPixmap bardejov = new QPixmap("bardejov.jpg"); QPixmap rotunda = new QPixmap("rotunda.jpg"); QPixmap mincol = new QPixmap("mincol.jpg"); QLabel barLabel = new QLabel(this); barLabel.setPixmap(bardejov); barLabel.move(20, 20); QLabel rotLabel = new QLabel(this); rotLabel.setPixmap(rotunda); rotLabel.move(40, 160); QLabel minLabel = new QLabel(this); minLabel.setPixmap(mincol); minLabel.move(170, 50); } public static void main(String[] args) { QApplication.initialize(args); new JambiApp(); QApplication.exec(); } } ``` 在此示例中，我們使用絕對定位顯示了三幅圖像。 ```java QLabel barLabel = new QLabel(this); barLabel.setPixmap(bardejov); ``` `QLabel`小部件用于保存圖像。 ```java barLabel.move(20, 20); ``` 我們使用`move()`方法將標簽放置在窗口上的`x = 20`，`y = 20`處。 調整窗口大小時，標簽將保留其初始大小。  圖：絕對定位 ## 按鈕示例 在下面的示例中，我們將在窗口的右下角放置兩個按鈕。 ```java package com.zetcode; import com.trolltech.qt.core.Qt; import com.trolltech.qt.gui.QApplication; import com.trolltech.qt.gui.QHBoxLayout; import com.trolltech.qt.gui.QPushButton; import com.trolltech.qt.gui.QVBoxLayout; import com.trolltech.qt.gui.QWidget; /** * ZetCode QtJambi tutorial * * In this program, use box layouts * to position two buttons in the * bottom right corner of the window * * @author jan bodnar * website zetcode.com * last modified April 2009 */ public class JambiApp extends QWidget { public JambiApp() { setWindowTitle("Buttons"); initUI(); resize(300, 150); move(300, 300); show(); } private void initUI() { QVBoxLayout vbox = new QVBoxLayout(this); QHBoxLayout hbox = new QHBoxLayout(); QPushButton ok = new QPushButton("OK", this); QPushButton apply = new QPushButton("Apply", this); hbox.addWidget(ok, 1, Qt.AlignmentFlag.AlignRight); hbox.addWidget(apply); vbox.addStretch(1); vbox.addLayout(hbox); } public static void main(String[] args) { QApplication.initialize(args); new JambiApp(); QApplication.exec(); } } ``` 我們使用嵌套框布局來獲得我們想要的布局。 ```java QVBoxLayout vbox = new QVBoxLayout(this); QHBoxLayout hbox = new QHBoxLayout(); ``` 我們使用一個垂直框和一個水平框。 ```java QPushButton ok = new QPushButton("OK", this); QPushButton apply = new QPushButton("Apply", this); ``` 這是兩個將進入窗口右下角的按鈕。 ```java hbox.addWidget(ok, 1, Qt.AlignmentFlag.AlignRight); ``` 我們將確定按鈕放入水平框中。 第二個參數是`stretch`因子。 它將擴大分配給“確定”按鈕的區域。 它會占用所有可用空間。 在此區域內，按鈕向右對齊。 ```java vbox.addStretch(1); ``` 這條線創建了一個垂直擴展的白色空間，它將帶有按鈕的水平框推到底部。 ```java vbox.addLayout(hbox); ``` 水平框嵌套在垂直框中。  圖：按鈕示例 ## Windows 示例 以下是嵌套框布局更復雜的示例。 ```java package com.zetcode; import com.trolltech.qt.core.Qt.AlignmentFlag; import com.trolltech.qt.gui.QApplication; import com.trolltech.qt.gui.QHBoxLayout; import com.trolltech.qt.gui.QLabel; import com.trolltech.qt.gui.QPushButton; import com.trolltech.qt.gui.QTextEdit; import com.trolltech.qt.gui.QVBoxLayout; import com.trolltech.qt.gui.QWidget; /** * ZetCode QtJambi tutorial * * In this program, use box layouts * to create a windows example * * @author jan bodnar * website zetcode.com * last modified April 2009 */ public class JambiApp extends QWidget { public JambiApp() { setWindowTitle("Windows"); initUI(); resize(350, 300); move(300, 300); show(); } private void initUI() { QVBoxLayout vbox = new QVBoxLayout(this); QVBoxLayout vbox1 = new QVBoxLayout(); QHBoxLayout hbox1 = new QHBoxLayout(); QHBoxLayout hbox2 = new QHBoxLayout(); QLabel windLabel = new QLabel("Windows", this); QTextEdit edit = new QTextEdit(this); edit.setEnabled(false); QPushButton activate = new QPushButton("Activate", this); QPushButton close = new QPushButton("Close", this); QPushButton help = new QPushButton("Help", this); QPushButton ok = new QPushButton("OK", this); vbox.addWidget(windLabel); vbox1.addWidget(activate); vbox1.addWidget(close, 0, AlignmentFlag.AlignTop); hbox1.addWidget(edit); hbox1.addLayout(vbox1); vbox.addLayout(hbox1); hbox2.addWidget(help); hbox2.addStretch(1); hbox2.addWidget(ok); vbox.addLayout(hbox2, 1); setLayout(vbox); } public static void main(String[] args) { QApplication.initialize(args); new JambiApp(); QApplication.exec(); } } ``` 在此布局中，我們使用兩個垂直和水平框。 ```java QVBoxLayout vbox = new QVBoxLayout(this); ``` 這是示例的基本布局。 ```java vbox.addWidget(windLabel); ``` 首先是標簽小部件。 它只是轉到垂直框的頂部。 ```java vbox1.addWidget(activate); vbox1.addWidget(close, 0, AlignmentFlag.AlignTop); hbox1.addWidget(edit); hbox1.addLayout(vbox1); vbox.addLayout(hbox1); ``` 在窗口的中心部分，我們有一個文本編輯小部件和兩個垂直排列的按鈕。 這些按鈕進入垂直框。 在此垂直框中，按鈕與頂部對齊。 垂直框和文本編輯進入水平框。 該水平框轉到標簽窗口小部件正下方的基本垂直框。 ```java hbox2.addWidget(help); hbox2.addStretch(1); hbox2.addWidget(ok); vbox.addLayout(hbox2, 1); ``` 幫助和確定按鈕進入另一個水平框。 這兩個按鈕之間有一個擴大的空白區域。 同樣，水平框轉到基本垂直框。 ```java setLayout(vbox); ``` 基本的垂直框設置為窗口的主要布局。  圖：窗口示例 ## 新文件夾示例 在最后一個示例中，我們使用`QGridLayout`管理器創建“新文件夾”布局示例。 ```java package com.zetcode; import com.trolltech.qt.gui.QApplication; import com.trolltech.qt.gui.QGridLayout; import com.trolltech.qt.gui.QLabel; import com.trolltech.qt.gui.QLineEdit; import com.trolltech.qt.gui.QPushButton; import com.trolltech.qt.gui.QTextEdit; import com.trolltech.qt.gui.QWidget; /** * ZetCode QtJambi tutorial * * In this program, use the QGridLayout * to create a New Folder example * * @author jan bodnar * website zetcode.com * last modified April 2009 */ public class JambiApp extends QWidget { public JambiApp() { setWindowTitle("New Folder"); initUI(); move(300, 300); show(); } private void initUI() { QGridLayout grid = new QGridLayout(this); QLabel nameLabel = new QLabel("Name", this); QLineEdit nameEdit = new QLineEdit(this); QTextEdit text = new QTextEdit(this); QPushButton okButton = new QPushButton("OK", this); QPushButton closeButton = new QPushButton("Close", this); grid.addWidget(nameLabel, 0, 0); grid.addWidget(nameEdit, 0, 1, 1, 3); grid.addWidget(text, 1, 0, 2, 4); grid.setColumnStretch(1, 1); grid.addWidget(okButton, 4, 2); grid.addWidget(closeButton, 4, 3); } public static void main(String[] args) { QApplication.initialize(args); new JambiApp(); QApplication.exec(); } } ``` 在我們的示例中，我們有一個標簽，一行編輯，一個文本編輯和兩個按鈕。 ```java QGridLayout grid = new QGridLayout(this); ``` 我們創建`QGridLayout`管理器的實例。 ```java grid.addWidget(nameLabel, 0, 0); ``` 我們將標簽小部件放置在網格的第一個單元格中。 單元格從 0 開始計數。最后兩個參數是行號和列號。 ```java grid.addWidget(nameEdit, 0, 1, 1, 3); ``` 線編輯窗口小部件位于第一行第二列。 最后兩個參數是行跨度和列跨度。 在水平方向上，小部件將跨越三列。 ```java grid.setColumnStretch(1, 1); ``` 該方法的參數是列號和拉伸因子。 在這里，我們將拉伸因子 1 設置到第二列。 這意味著此列將占用所有剩余空間。 之所以這樣設置，是因為我們希望按鈕保持其初始大小。  圖：新文件夾示例 在 QtJambi 教程的這一部分中，我們提到了小部件的布局管理。