# 布局管理 > 原文： [http://zetcode.com/gui/csharpqyoto/layoutmanagement/](http://zetcode.com/gui/csharpqyoto/layoutmanagement/) 在 Qyoto C# 編程教程的這一部分中，我們將介紹布局管理器。 在設計應用的 GUI 時，我們決定要使用哪些組件以及如何在應用中組織這些組件。 為了組織我們的組件，我們使用專門的不可見對象，稱為布局管理器。 Qyoto 中有多個選項。 我們可以使用絕對定位，內置布局管理器或創建自定義布局管理器。 我們還可以使用 Qt Designer 直觀地構建布局。 Qyoto 有一些重要的內置布局管理器。 `QVBoxLayout`類垂直排列小部件。 `QHBoxLayout`水平排列小部件。 `QGridLayout`類將小部件布置在網格中。 網格布局是最靈活的布局管理器。 框布局可以相互嵌套以創建復雜的布局。 ## 絕對定位 在大多數情況下，程序員應使用布局管理器。 在某些情況下，我們可以使用絕對定位。 在絕對定位中，程序員以像素為單位指定每個小部件的位置和大小。 如果調整窗口大小，則窗口小部件的大小和位置不會改變。 應用在各種平臺上看起來都不同，在 Linux 上看起來不錯，在 Mac 上看起來不好。 在應用中更改字體可能會破壞布局。 如果將應用翻譯成另一種語言，則必須重做布局。 對于所有這些問題，僅在有理由時才使用絕對定位。 ```cs using System; using QtCore; using QtGui; /** * ZetCode Qyoto C# tutorial * * In this program, we lay out widgets * using absolute positioning * * @author Jan Bodnar * website zetcode.com * last modified October 2012 */ public class QyotoApp : QWidget { public QyotoApp() { WindowTitle = "Absolute"; InitUI(); Resize(300, 280); Move(300, 300); Show(); } void InitUI() { StyleSheet = "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.Pixmap = bardejov; barLabel.Move(20, 20); QLabel rotLabel = new QLabel(this); rotLabel.Pixmap = rotunda; rotLabel.Move(40, 160); QLabel minLabel = new QLabel(this); minLabel.Pixmap = mincol; minLabel.Move(170, 50); } [STAThread] public static int Main(String[] args) { new QApplication(args); new QyotoApp(); return QApplication.Exec(); } } ``` 在此示例中，我們使用絕對定位顯示了三幅圖像。 ```cs StyleSheet = "QWidget { background-color: #414141 }"; ``` `StyleSheet`屬性用于更改窗口工作區的背景顏色。 ```cs QLabel barLabel = new QLabel(this); barLabel.Pixmap = bardejov; ``` `QLabel`小部件用于保存圖像。 ```cs barLabel.Move(20, 20); ``` 我們使用`Move()`方法將標簽放置在窗口上的`x = 20`，`y = 20`處。 調整窗口大小時，標簽將保留其初始大小。  圖：絕對定位 ## 按鈕示例 在下面的示例中，我們將在窗口的右下角放置兩個按鈕。 ```cs using System; using QtCore; using QtGui; /** * ZetCode Qyoto C# 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 October 2012 */ public class QyotoApp : QWidget { public QyotoApp() { WindowTitle = "Buttons"; InitUI(); Resize(300, 150); Move(300, 300); Show(); } 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, AlignmentFlag.AlignRight); hbox.AddWidget(apply); vbox.AddStretch(1); vbox.AddLayout(hbox); } [STAThread] public static int Main(String[] args) { new QApplication(args); new QyotoApp(); return QApplication.Exec(); } } ``` 我們使用嵌套框布局來獲得我們想要的布局。 ```cs QVBoxLayout vbox = new QVBoxLayout(this); QHBoxLayout hbox = new QHBoxLayout(); ``` 我們使用一個垂直框和一個水平框。 ```cs QPushButton ok = new QPushButton("OK", this); QPushButton apply = new QPushButton("Apply", this); ``` 這是兩個將進入窗口右下角的按鈕。 ```cs hbox.AddWidget(ok, 1, AlignmentFlag.AlignRight); ``` 我們將確定按鈕放入水平框中。 第二個參數是`stretch`因子。 它將擴大分配給“確定”按鈕的區域。 它會占用所有可用空間。 在此區域內，按鈕向右對齊。 ```cs vbox.AddStretch(1); ``` 這條線創建了一個垂直擴展的白色空間，它將帶有按鈕的水平框推到底部。 ```cs vbox.AddLayout(hbox); ``` 水平框嵌套在垂直框中。  圖：按鈕示例 ## Windows 示例 以下是嵌套框布局更復雜的示例。 ```cs using System; using QtCore; using QtGui; /** * ZetCode Qyoto C# tutorial * * In this program, use box layouts * to create a windows example. * * @author Jan Bodnar * website zetcode.com * last modified October 2012 */ public class QyotoApp : QWidget { public QyotoApp() { WindowTitle = "Windows"; InitUI(); Resize(350, 300); Move(300, 300); Show(); } 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.Enabled = 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); Layout = vbox; } [STAThread] public static int Main(String[] args) { new QApplication(args); new QyotoApp(); return QApplication.Exec(); } } ``` 在此布局中，我們使用兩個垂直和水平框。 ```cs QVBoxLayout vbox = new QVBoxLayout(this); ``` 這是示例的基本布局。 ```cs vbox.AddWidget(windLabel); ``` 首先是標簽小部件。 它只是轉到垂直框的頂部。 ```cs vbox1.AddWidget(activate); vbox1.AddWidget(close, 0, AlignmentFlag.AlignTop); hbox1.AddWidget(edit); hbox1.AddLayout(vbox1); vbox.AddLayout(hbox1); ``` 在窗口的中心部分，我們有一個文本編輯小部件和兩個垂直排列的按鈕。 這些按鈕進入垂直框。 在此垂直框中，按鈕與頂部對齊。 垂直框和文本編輯進入水平框。 該水平框轉到標簽窗口小部件正下方的基本垂直框。 ```cs hbox2.AddWidget(help); hbox2.AddStretch(1); hbox2.AddWidget(ok); vbox.AddLayout(hbox2, 1); ``` 幫助和確定按鈕進入另一個水平框。 這兩個按鈕之間有一個擴大的空白區域。 同樣，水平框轉到基本垂直框。 ```cs Layout = vbox; ``` 基本的垂直框設置為窗口的主要布局。  圖：窗口示例 ## 新文件夾示例 在最后一個示例中，我們使用`QGridLayout`管理器創建“新文件夾”布局示例。 ```cs using System; using QtCore; using QtGui; /** * ZetCode Qyoto C# tutorial * * In this program, use the QGridLayout manager * to create a New Folder example. * * @author Jan Bodnar * website zetcode.com * last modified October 2012 */ public class QyotoApp : QWidget { public QyotoApp() { WindowTitle = "New Folder"; InitUI(); Resize(300, 300); Move(300, 300); Show(); } 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); } [STAThread] public static int Main(String[] args) { new QApplication(args); new QyotoApp(); return QApplication.Exec(); } } ``` 在我們的示例中，我們有一個標簽，一行編輯，一個文本編輯和兩個按鈕。 ```cs QGridLayout grid = new QGridLayout(this); ``` 我們創建`QGridLayout`管理器的實例。 ```cs grid.AddWidget(nameLabel, 0, 0); ``` 我們將標簽小部件放置在網格的第一個單元格中。 單元格從 0 開始計數。最后兩個參數是行號和列號。 ```cs grid.AddWidget(nameEdit, 0, 1, 1, 3); ``` 線編輯窗口小部件位于第一行第二列。 最后兩個參數是行跨度和列跨度。 在水平方向上，小部件將跨越三列。 ```cs grid.SetColumnStretch(1, 1); ``` 該方法的參數是列號和拉伸因子。 在這里，我們將拉伸因子 1 設置到第二列。 這意味著此列將占用所有剩余空間。 之所以這樣設置，是因為我們希望按鈕保持其初始大小。  圖：新文件夾 example 在 Qyoto C# 教程的這一部分中，我們提到了小部件的布局管理。