原文： http://zetcode.com/gui/vbqyoto/layoutmanagement/

在 Visual Basic Qyoto 编程教程的这一部分中，我们将介绍布局管理器。

在设计应用的 GUI 时，我们决定要使用哪些组件以及如何在应用中组织这些组件。 为了组织我们的组件，我们使用专门的不可见对象，称为布局管理器。 Qyoto 中有多个选项。 我们可以使用绝对定位，内置布局管理器或创建自定义布局管理器。 我们还可以使用 Qt Designer 直观地构建布局。

Qyoto 有一些重要的内置布局管理器。 QVBoxLayout类垂直排列小部件。 QHBoxLayout水平排列小部件。 QGridLayout类将小部件布置在网格中。 网格布局是最灵活的布局管理器。 盒子布局相互嵌套以创建复杂的布局。

绝对定位

在大多数情况下，程序员应使用布局管理器。 在某些情况下，我们可以使用绝对定位。 在绝对定位中，程序员以像素为单位指定每个小部件的位置和大小。 如果我们调整窗口大小，则小部件的大小和位置不会改变。 在各种平台上，应用看起来都不同，在 Linux 上看起来不错，在 Mac OS 上看起来不太正常。 在我们的应用中更改字体可能会破坏布局。 如果我们将您的应用翻译成另一种语言，则必须重做布局。 对于所有这些问题，仅在有理由时才使用绝对定位。

  1. ' ZetCode Mono Visual Basic Qt tutorial
  2. '
  3. ' In this program, we lay out widgets
  4. ' using absolute positioning
  5. '
  6. ' author jan bodnar
  7. ' last modified May 2009
  8. ' website www.zetcode.com
  10. Imports Qyoto
  12. Public Class VBQApp 
  13.     Inherits QMainWindow
  15.     Dim bardejov As QPixmap
  16.     Dim rotunda As QPixmap 
  17.     Dim mincol As QPixmap
  19.     Public Sub New()
  21.         Me.SetWindowTitle("Absolute")
  23.         Me.InitUI()
  25.         Me.Resize(300, 280)
  26.         Me.Move(300, 300)
  27.         Me.Show()
  29.     End Sub
  31.     Private Sub InitUI()
  33.         SetStyleSheet("QWidget { background-color: #414141 }")
  35.         Try 
  36.             bardejov = New QPixmap("bardejov.jpg")
  37.             rotunda = New QPixmap("rotunda.jpg")
  38.             mincol = New QPixmap("mincol.jpg")
  39.         Catch e As Exception
  40.             Console.WriteLine(e.Message)
  41.             Environment.Exit(1)
  42.         End Try
  44.         Dim barLabel As New QLabel(Me)
  45.         barLabel.SetPixmap(bardejov)
  46.         barLabel.SetGeometry(20, 20, 120, 90)
  48.         Dim rotLabel As New QLabel(Me)
  49.         rotLabel.SetPixmap(rotunda)
  50.         rotLabel.SetGeometry(40, 160, 120, 90)
  52.         Dim minLabel As New QLabel(Me)
  53.         minLabel.SetPixmap(mincol)
  54.         minLabel.SetGeometry(170, 50, 120, 90)
  56.     End Sub
  58.     Public Shared Sub Main(ByVal args() As String)
  59.         Dim qapp As New QApplication(args)
  60.         Dim app As New VBQApp
  61.         QApplication.Exec()
  62.     End Sub
  64. End Class

在此示例中，我们使用绝对定位显示了三幅图像。

  1. Dim barLabel As New QLabel(Me)
  2. barLabel.SetPixmap(bardejov)

QLabel小部件用于保存图像。

  1. barLabel.SetGeometry(20, 20, 120, 90)

我们使用SetGeometry()方法将标签放置在窗口上的x = 20，y = 20处。 图片大小为120x90。

调整窗口大小时，标签将保留其初始大小。

布局管理 - 图1

图：绝对定位

按钮示例

在下面的示例中，我们将在窗口的右下角放置两个按钮。

  1. ' ZetCode Mono Visual Basic Qt tutorial
  2. '
  3. ' In this program, use box layouts
  4. ' to position two buttons in the
  5. ' bottom right corner of the window
  6. '
  7. ' author jan bodnar
  8. ' last modified May 2009
  9. ' website www.zetcode.com
  11. Imports Qyoto
  13. Public Class VBQApp 
  14.     Inherits QWidget
  16.     Public Sub New()
  18.         Me.SetWindowTitle("Buttons")
  20.         Me.InitUI()
  22.         Me.Resize(300, 150)
  23.         Me.Move(300, 300)
  24.         Me.Show()
  26.     End Sub
  28.     Private Sub InitUI()
  30.         Dim vbox As New QVBoxLayout(Me)
  31.         Dim hbox As New QHBoxLayout
  33.         Dim ok As New QPushButton("OK", Me)
  34.         Dim apply As New QPushButton("Apply", Me)
  36.         hbox.AddWidget(ok, 1, Qt.AlignmentFlag.AlignRight)
  37.         hbox.AddWidget(apply)
  39.         vbox.AddStretch(1)
  40.         vbox.AddLayout(hbox)
  42.     End Sub
  44.     Public Shared Sub Main(ByVal args() As String)
  45.         Dim qapp As New QApplication(args)
  46.         Dim app As New VBQApp
  47.         QApplication.Exec()
  48.     End Sub
  50. End Class

我们使用嵌套框布局来获得我们想要的布局。

  1. Dim vbox As New QVBoxLayout(Me)
  2. Dim hbox As New QHBoxLayout

我们使用一个垂直框和一个水平框。

  1. Dim ok As New QPushButton("OK", Me)
  2. Dim apply As New QPushButton("Apply", Me)

这是两个将进入窗口右下角的按钮。

  1. hbox.AddWidget(ok, 1, Qt.AlignmentFlag.AlignRight)

我们将确定按钮放入水平框中。 第二个参数是stretch因子。 它将扩大分配给“确定”按钮的区域。 它会占用所有可用空间。 在此区域内，按钮向右对齐。

  1. vbox.AddStretch(1)

这条线创建了一个垂直扩展的白色空间，它将带有按钮的水平框推到底部。

  1. vbox.AddLayout(hbox)

水平框嵌套在垂直框中。

布局管理 - 图2

图：按钮示例

Windows 示例

以下是嵌套框布局更复杂的示例。

  1. ' ZetCode Mono Visual Basic Qt tutorial
  2. '
  3. ' In this program, use box layouts
  4. ' to create a windows example
  5. '
  6. ' author jan bodnar
  7. ' last modified May 2009
  8. ' website www.zetcode.com
  10. Imports Qyoto
  12. Public Class VBQApp 
  13.     Inherits QWidget
  15.     Public Sub New()
  17.         Me.SetWindowTitle("Windows")
  19.         Me.InitUI()
  21.         Me.Resize(350, 300)
  22.         Me.Move(300, 300)
  23.         Me.Show()
  25.     End Sub
  27.     Private Sub InitUI()
  29.         Dim vbox As New QVBoxLayout(Me)
  31.         Dim vbox1 As New QVBoxLayout
  32.         Dim hbox1 As New QHBoxLayout
  33.         Dim hbox2 As New QHBoxLayout
  35.         Dim windLabel As New QLabel("Windows", Me)
  36.         Dim edit As New QTextEdit(Me)
  37.         edit.SetEnabled(False)
  39.         Dim activate As New QPushButton("Activate", Me)
  40.         Dim close As New QPushButton("Close", Me)
  41.         Dim help As New QPushButton("Help", Me)
  42.         Dim ok As New QPushButton("OK", Me)
  44.         vbox.AddWidget(windLabel)
  46.         vbox1.AddWidget(activate)
  47.         vbox1.AddWidget(close, 0, AlignmentFlag.AlignTop)
  48.         hbox1.AddWidget(edit)
  49.         hbox1.AddLayout(vbox1)
  51.         vbox.AddLayout(hbox1)
  53.         hbox2.AddWidget(help)
  54.         hbox2.AddStretch(1)
  55.         hbox2.AddWidget(ok)
  57.         vbox.AddLayout(hbox2, 1)
  59.     End Sub
  61.     Public Shared Sub Main(ByVal args() As String)
  62.         Dim qapp As New QApplication(args)
  63.         Dim app As New VBQApp
  64.         QApplication.Exec()
  65.     End Sub
  67. End Class

在此布局中，我们使用两个垂直和水平框。

  1. Dim vbox As New QVBoxLayout(Me)

这是示例的基本布局。

  1. vbox.AddWidget(windLabel)

首先是标签小部件。 它只是转到垂直框的顶部。

  1. vbox1.AddWidget(activate)
  2. vbox1.AddWidget(close, 0, AlignmentFlag.AlignTop)
  3. hbox1.AddWidget(edit)
  4. hbox1.AddLayout(vbox1)
  6. vbox.AddLayout(hbox1)

在窗口的中心部分，我们有一个文本编辑小部件和两个垂直排列的按钮。 这些按钮进入垂直框。 在此垂直框中，按钮与顶部对齐。 垂直框和文本编辑进入水平框。 该水平框转到标签窗口小部件正下方的基本垂直框。

  1. hbox2.AddWidget(help)
  2. hbox2.AddStretch(1)
  3. hbox2.AddWidget(ok)
  5. vbox.AddLayout(hbox2, 1)

帮助和确定按钮进入另一个水平框。 这两个按钮之间有一个扩大的空白区域。 同样，水平框转到基本垂直框。

布局管理 - 图3

图：窗口示例

新文件夹示例

在最后一个示例中，我们使用QGridLayout管理器创建“新文件夹”布局示例。

  1. ' ZetCode Mono Visual Basic Qt tutorial
  2. '
  3. ' In this program, use the QGridLayout
  4. ' to create a New Folder example
  5. '
  6. ' author jan bodnar
  7. ' last modified May 2009
  8. ' website www.zetcode.com
  10. Imports Qyoto
  12. Public Class VBQApp 
  13.     Inherits QWidget
  15.     Public Sub New()
  17.         Me.SetWindowTitle("New Folder")
  19.         Me.InitUI()
  21.         Me.Resize(350, 300)
  22.         Me.Move(300, 300)
  23.         Me.Show()
  25.     End Sub
  27.     Private Sub InitUI()
  29.         Dim grid As New QGridLayout(Me)
  31.         Dim nameLabel As New QLabel("Name", Me)
  32.         Dim nameEdit As New QLineEdit(Me)
  33.         Dim text As New QTextEdit(Me)
  34.         Dim okButton As New QPushButton("OK", Me)
  35.         Dim closeButton As New QPushButton("Close", Me)
  37.         grid.AddWidget(nameLabel, 0, 0)
  38.         grid.AddWidget(nameEdit, 0, 1, 1, 3)
  39.         grid.AddWidget(text, 1, 0, 2, 4)
  40.         grid.SetColumnStretch(1, 1)
  41.         grid.AddWidget(okButton, 4, 2)
  42.         grid.AddWidget(closeButton, 4, 3)
  44.     End Sub
  46.     Public Shared Sub Main(ByVal args() As String)
  47.         Dim qapp As New QApplication(args)
  48.         Dim app As New VBQApp
  49.         QApplication.Exec()
  50.     End Sub
  52. End Class

在我们的示例中，我们有一个标签，一行编辑，一个文本编辑和两个按钮。

  1. Dim grid As New QGridLayout(Me)

我们创建QGridLayout管理器的实例。

  1. grid.AddWidget(nameLabel, 0, 0)

我们将标签小部件放置在网格的第一个单元格中。 单元格从 0 开始计数。最后两个参数是行号和列号。

  1. grid.AddWidget(nameEdit, 0, 1, 1, 3)

线编辑窗口小部件位于第一行第二列。 最后两个参数是行跨度和列跨度。 在水平方向上，小部件将跨越三列。

  1. grid.SetColumnStretch(1, 1)

该方法的参数是列号和拉伸因子。 在这里，我们将拉伸因子 1 设置到第二列。 这意味着此列将占用所有剩余空间。 之所以这样设置，是因为我们希望按钮保持其初始大小。

布局管理 - 图4

图：新文件夹 example

在 Visual Basic Qyoto 教程的这一部分中，我们提到了小部件的布局管理。