# 布局管理 > 原文： [http://zetcode.com/gui/vbqyoto/layoutmanagement/](http://zetcode.com/gui/vbqyoto/layoutmanagement/) 在 Visual Basic Qyoto 編程教程的這一部分中，我們將介紹布局管理器。 在設計應用的 GUI 時，我們決定要使用哪些組件以及如何在應用中組織這些組件。 為了組織我們的組件，我們使用專門的不可見對象，稱為布局管理器。 Qyoto 中有多個選項。 我們可以使用絕對定位，內置布局管理器或創建自定義布局管理器。 我們還可以使用 Qt Designer 直觀地構建布局。 Qyoto 有一些重要的內置布局管理器。 `QVBoxLayout`類垂直排列小部件。 `QHBoxLayout`水平排列小部件。 `QGridLayout`類將小部件布置在網格中。 網格布局是最靈活的布局管理器。 盒子布局相互嵌套以創建復雜的布局。 ## 絕對定位 在大多數情況下，程序員應使用布局管理器。 在某些情況下，我們可以使用絕對定位。 在絕對定位中，程序員以像素為單位指定每個小部件的位置和大小。 如果我們調整窗口大小，則小部件的大小和位置不會改變。 在各種平臺上，應用看起來都不同，在 Linux 上看起來不錯，在 Mac OS 上看起來不太正常。 在我們的應用中更改字體可能會破壞布局。 如果我們將您的應用翻譯成另一種語言，則必須重做布局。 對于所有這些問題，僅在有理由時才使用絕對定位。 ```vb ' ZetCode Mono Visual Basic Qt tutorial ' ' In this program, we lay out widgets ' using absolute positioning ' ' author jan bodnar ' last modified May 2009 ' website www.zetcode.com Imports Qyoto Public Class VBQApp Inherits QMainWindow Dim bardejov As QPixmap Dim rotunda As QPixmap Dim mincol As QPixmap Public Sub New() Me.SetWindowTitle("Absolute") Me.InitUI() Me.Resize(300, 280) Me.Move(300, 300) Me.Show() End Sub Private Sub InitUI() SetStyleSheet("QWidget { background-color: #414141 }") Try bardejov = New QPixmap("bardejov.jpg") rotunda = New QPixmap("rotunda.jpg") mincol = New QPixmap("mincol.jpg") Catch e As Exception Console.WriteLine(e.Message) Environment.Exit(1) End Try Dim barLabel As New QLabel(Me) barLabel.SetPixmap(bardejov) barLabel.SetGeometry(20, 20, 120, 90) Dim rotLabel As New QLabel(Me) rotLabel.SetPixmap(rotunda) rotLabel.SetGeometry(40, 160, 120, 90) Dim minLabel As New QLabel(Me) minLabel.SetPixmap(mincol) minLabel.SetGeometry(170, 50, 120, 90) End Sub Public Shared Sub Main(ByVal args() As String) Dim qapp As New QApplication(args) Dim app As New VBQApp QApplication.Exec() End Sub End Class ``` 在此示例中，我們使用絕對定位顯示了三幅圖像。 ```vb Dim barLabel As New QLabel(Me) barLabel.SetPixmap(bardejov) ``` `QLabel`小部件用于保存圖像。 ```vb barLabel.SetGeometry(20, 20, 120, 90) ``` 我們使用`SetGeometry()`方法將標簽放置在窗口上的`x = 20`，`y = 20`處。 圖片大小為`120x90`。 調整窗口大小時，標簽將保留其初始大小。  圖：絕對定位 ## 按鈕示例 在下面的示例中，我們將在窗口的右下角放置兩個按鈕。 ```vb ' ZetCode Mono Visual Basic Qt tutorial ' ' In this program, use box layouts ' to position two buttons in the ' bottom right corner of the window ' ' author jan bodnar ' last modified May 2009 ' website www.zetcode.com Imports Qyoto Public Class VBQApp Inherits QWidget Public Sub New() Me.SetWindowTitle("Buttons") Me.InitUI() Me.Resize(300, 150) Me.Move(300, 300) Me.Show() End Sub Private Sub InitUI() Dim vbox As New QVBoxLayout(Me) Dim hbox As New QHBoxLayout Dim ok As New QPushButton("OK", Me) Dim apply As New QPushButton("Apply", Me) hbox.AddWidget(ok, 1, Qt.AlignmentFlag.AlignRight) hbox.AddWidget(apply) vbox.AddStretch(1) vbox.AddLayout(hbox) End Sub Public Shared Sub Main(ByVal args() As String) Dim qapp As New QApplication(args) Dim app As New VBQApp QApplication.Exec() End Sub End Class ``` 我們使用嵌套框布局來獲得我們想要的布局。 ```vb Dim vbox As New QVBoxLayout(Me) Dim hbox As New QHBoxLayout ``` 我們使用一個垂直框和一個水平框。 ```vb Dim ok As New QPushButton("OK", Me) Dim apply As New QPushButton("Apply", Me) ``` 這是兩個將進入窗口右下角的按鈕。 ```vb hbox.AddWidget(ok, 1, Qt.AlignmentFlag.AlignRight) ``` 我們將確定按鈕放入水平框中。 第二個參數是`stretch`因子。 它將擴大分配給“確定”按鈕的區域。 它會占用所有可用空間。 在此區域內，按鈕向右對齊。 ```vb vbox.AddStretch(1) ``` 這條線創建了一個垂直擴展的白色空間，它將帶有按鈕的水平框推到底部。 ```vb vbox.AddLayout(hbox) ``` 水平框嵌套在垂直框中。  圖：按鈕示例 ## Windows 示例 以下是嵌套框布局更復雜的示例。 ```vb ' ZetCode Mono Visual Basic Qt tutorial ' ' In this program, use box layouts ' to create a windows example ' ' author jan bodnar ' last modified May 2009 ' website www.zetcode.com Imports Qyoto Public Class VBQApp Inherits QWidget Public Sub New() Me.SetWindowTitle("Windows") Me.InitUI() Me.Resize(350, 300) Me.Move(300, 300) Me.Show() End Sub Private Sub InitUI() Dim vbox As New QVBoxLayout(Me) Dim vbox1 As New QVBoxLayout Dim hbox1 As New QHBoxLayout Dim hbox2 As New QHBoxLayout Dim windLabel As New QLabel("Windows", Me) Dim edit As New QTextEdit(Me) edit.SetEnabled(False) Dim activate As New QPushButton("Activate", Me) Dim close As New QPushButton("Close", Me) Dim help As New QPushButton("Help", Me) Dim ok As New QPushButton("OK", Me) 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) End Sub Public Shared Sub Main(ByVal args() As String) Dim qapp As New QApplication(args) Dim app As New VBQApp QApplication.Exec() End Sub End Class ``` 在此布局中，我們使用兩個垂直和水平框。 ```vb Dim vbox As New QVBoxLayout(Me) ``` 這是示例的基本布局。 ```vb vbox.AddWidget(windLabel) ``` 首先是標簽小部件。 它只是轉到垂直框的頂部。 ```vb vbox1.AddWidget(activate) vbox1.AddWidget(close, 0, AlignmentFlag.AlignTop) hbox1.AddWidget(edit) hbox1.AddLayout(vbox1) vbox.AddLayout(hbox1) ``` 在窗口的中心部分，我們有一個文本編輯小部件和兩個垂直排列的按鈕。 這些按鈕進入垂直框。 在此垂直框中，按鈕與頂部對齊。 垂直框和文本編輯進入水平框。 該水平框轉到標簽窗口小部件正下方的基本垂直框。 ```vb hbox2.AddWidget(help) hbox2.AddStretch(1) hbox2.AddWidget(ok) vbox.AddLayout(hbox2, 1) ``` 幫助和確定按鈕進入另一個水平框。 這兩個按鈕之間有一個擴大的空白區域。 同樣，水平框轉到基本垂直框。  圖：窗口示例 ## 新文件夾示例 在最后一個示例中，我們使用`QGridLayout`管理器創建“新文件夾”布局示例。 ```vb ' ZetCode Mono Visual Basic Qt tutorial ' ' In this program, use the QGridLayout ' to create a New Folder example ' ' author jan bodnar ' last modified May 2009 ' website www.zetcode.com Imports Qyoto Public Class VBQApp Inherits QWidget Public Sub New() Me.SetWindowTitle("New Folder") Me.InitUI() Me.Resize(350, 300) Me.Move(300, 300) Me.Show() End Sub Private Sub InitUI() Dim grid As New QGridLayout(Me) Dim nameLabel As New QLabel("Name", Me) Dim nameEdit As New QLineEdit(Me) Dim text As New QTextEdit(Me) Dim okButton As New QPushButton("OK", Me) Dim closeButton As New QPushButton("Close", Me) 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) End Sub Public Shared Sub Main(ByVal args() As String) Dim qapp As New QApplication(args) Dim app As New VBQApp QApplication.Exec() End Sub End Class ``` 在我們的示例中，我們有一個標簽，一行編輯，一個文本編輯和兩個按鈕。 ```vb Dim grid As New QGridLayout(Me) ``` 我們創建`QGridLayout`管理器的實例。 ```vb grid.AddWidget(nameLabel, 0, 0) ``` 我們將標簽小部件放置在網格的第一個單元格中。 單元格從 0 開始計數。最后兩個參數是行號和列號。 ```vb grid.AddWidget(nameEdit, 0, 1, 1, 3) ``` 線編輯窗口小部件位于第一行第二列。 最后兩個參數是行跨度和列跨度。 在水平方向上，小部件將跨越三列。 ```vb grid.SetColumnStretch(1, 1) ``` 該方法的參數是列號和拉伸因子。 在這里，我們將拉伸因子 1 設置到第二列。 這意味著此列將占用所有剩余空間。 之所以這樣設置，是因為我們希望按鈕保持其初始大小。  圖：新文件夾 example 在 Visual Basic Qyoto 教程的這一部分中，我們提到了小部件的布局管理。