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

在本章中，我们将展示如何在窗口或对话框中布置窗口小部件。

在设计应用的 GUI 时，我们决定要使用哪些小部件以及如何在应用中组织这些小部件。 为了组织窗口小部件，我们使用专门的不可见窗口小部件，称为布局容器。 在本章中，我们将提到Alignment，Fixed，VBox和Table。

Fixed

Fixed容器将子窗口小部件放置在固定位置并具有固定大小。 此容器不执行自动布局管理。 在大多数应用中，我们不使用此容器。 我们在某些专业领域使用它。 例如游戏，使用图表的专用应用，可以移动的可调整大小的组件（如电子表格应用中的图表），小型教育示例。

  1. ' ZetCode Mono Visual Basic GTK# 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 Gtk
  12. Public Class GtkVBApp
  13.     Inherits Window
  15.     Private Dim rotunda As Gdk.Pixbuf 
  16.     Private Dim bardejov As Gdk.Pixbuf 
  17.     Private Dim mincol As Gdk.Pixbuf
  19.     Public Sub New
  21.         MyBase.New("Fixed")
  23.         Me.InitUI
  25.         Me.SetDefaultSize(300, 280)
  26.         Me.SetPosition(WindowPosition.Center)
  27.         AddHandler Me.DeleteEvent, AddressOf Me.OnDelete
  29.         Me.ShowAll 
  31.     End Sub
  33.     Private Sub InitUI
  35.         Me.ModifyBg(StateType.Normal, New Gdk.Color(40, 40, 40))
  37.         Try 
  38.             bardejov = New Gdk.Pixbuf("bardejov.jpg")
  39.             rotunda = New Gdk.Pixbuf("rotunda.jpg")
  40.             mincol = New Gdk.Pixbuf("mincol.jpg")
  41.         Catch e As Exception
  42.             Console.WriteLine("Cannot load images")
  43.             Console.WriteLine(e.Message)
  44.             Environment.Exit(1)
  45.         End Try
  47.         Dim image1 As New Image(bardejov)
  48.         Dim image2 As New Image(rotunda)
  49.         Dim image3 As New Image(mincol)
  51.         Dim fixed As New Fixed
  53.         fixed.Put(image1, 20, 20)
  54.         fixed.Put(image2, 40, 160)
  55.         fixed.Put(image3, 170, 50)
  57.         Me.Add(fixed)
  59.     End Sub
  61.     Sub OnDelete(ByVal sender As Object, _ 
  62.             ByVal args As DeleteEventArgs)
  63.         Application.Quit
  64.     End Sub
  66.     Public Shared Sub Main
  68.         Application.Init
  69.         Dim app As New GtkVBApp
  70.         Application.Run
  72.     End Sub
  74. End Class

在我们的示例中，我们在窗口上显示了三个小图像。 我们明确指定放置这些图像的 x，y 坐标。

  1. vbnc -r:/usr/lib/mono/gtk-sharp-2.0/gtk-sharp.dll -r:/usr/lib/mono/gtk-sharp-2.0/gdk-sharp.dll 
  2.       absolute.vb

在此示例中，我们还使用gdk-sharp程序集。

  1. Me.ModifyBg(StateType.Normal, New Gdk.Color(40, 40, 40))

为了获得更好的视觉体验，我们将背景色更改为深灰色。

  1. bardejov = New Gdk.Pixbuf("bardejov.jpg")

我们将图像从磁盘加载到Gdk.Pixbuf对象。

  1. Dim image1 As New Image(bardejov)
  2. Dim image2 As New Image(rotunda)
  3. Dim image3 As New Image(mincol)

Image是用于显示图像的小部件。 它在构造器中使用Gdk.Pixbuf对象。

  1. Dim fixed As New Fixed

我们创建Fixed容器。

  1. fixed.Put(image1, 20, 20)

我们将第一个图像放置在x = 20，y = 20坐标处。

  1. Me.Add(fixed)

最后，我们将Fixed容器添加到窗口中。

布局管理 - 图1

图：固定

Alignment

Alignment容器控制其子窗口小部件的对齐方式和大小。

  1. ' ZetCode Mono Visual Basic GTK# tutorial
  2. '
  3. ' In this program, we position two buttons
  4. ' in the bottom right corner of the window.
  5. ' We use horizontal and vertical boxes.
  6. '
  7. ' author jan bodnar
  8. ' last modified May 2009
  9. ' website www.zetcode.com
  11. Imports Gtk
  13. Public Class GtkVBApp
  14.     Inherits Window
  16.     Public Sub New
  18.         MyBase.New("Buttons")
  20.         Me.InitUI
  22.         Me.SetDefaultSize(260, 150)
  23.         Me.SetPosition(WindowPosition.Center)
  24.         AddHandler Me.DeleteEvent, AddressOf Me.OnDelete
  26.         Me.ShowAll
  28.     End Sub
  30.     Private Sub InitUI
  32.         Dim vbox As New VBox(False, 5)
  33.         Dim hbox As New HBox(True, 3)
  35.         Dim valign As New Alignment(0, 1, 0, 0)
  36.         vbox.PackStart(valign)
  38.         Dim ok As New Button("OK")
  39.         ok.SetSizeRequest(70, 30)
  40.         Dim close As New Button("Close")
  42.         hbox.Add(ok)
  43.         hbox.Add(close)
  45.         Dim halign As New Alignment(1, 0, 0, 0)
  46.         halign.Add(hbox)
  48.         vbox.PackStart(halign, False, False, 3)
  50.         Me.Add(vbox)
  52.     End Sub
  54.     Sub OnDelete(ByVal sender As Object, _
  55.             ByVal args As DeleteEventArgs)
  56.         Application.Quit
  57.     End Sub
  59.     Public Shared Sub Main
  61.         Application.Init
  62.         Dim app As New GtkVBApp
  63.         Application.Run
  65.     End Sub
  67. End Class

在代码示例中，我们在窗口的右下角放置了两个按钮。 为此，我们使用一个水平框和一个垂直框以及两个对齐容器。

  1. Dim valign As New Alignment(0, 1, 0, 0)

这会将子窗口小部件置于底部。

  1. vbox.PackStart(valign)

在这里，我们将Alignment小部件放置到垂直框中。

  1. Dim hbox As New HBox(True, 3)
  2. ...
  3. Dim ok As New Button("OK")
  4. ok.SetSizeRequest(70, 30)
  5. Dim close As New Button("Close")
  7. hbox.Add(ok)
  8. hbox.Add(close)

我们创建一个水平框，并在其中放置两个按钮。

  1. Dim halign As New Alignment(1, 0, 0, 0)
  2. halign.Add(hbox)
  4. vbox.PackStart(halign, False, False, 3)

这将创建一个对齐容器，它将其子窗口小部件放在右侧。 我们将水平框添加到对齐容器中，然后将对齐容器包装到垂直框中。 我们必须记住，对齐容器仅包含一个子窗口小部件。 这就是为什么我们必须使用盒子。

布局管理 - 图2

图：按钮

计算器骨架

Table小部件按行和列排列小部件。

  1. ' ZetCode Mono Visual Basic GTK# tutorial
  2. '
  3. ' In this program we create a skeleton of
  4. ' a calculator. We use the Table widget. 
  5. '
  6. ' author jan bodnar
  7. ' last modified May 2009
  8. ' website www.zetcode.com
  10. Imports Gtk
  12. Public Class GtkVBApp
  13.     Inherits Window
  15.     Public Sub New
  17.         MyBase.New("Calculator")
  19.         Me.InitUI
  21.         Me.SetDefaultSize(300, 250)
  22.         Me.SetPosition(WindowPosition.Center)
  23.         AddHandler Me.DeleteEvent, AddressOf Me.OnDelete
  25.         Me.ShowAll 
  27.     End Sub
  29.     Private Sub InitUI
  31.         Dim vbox As New VBox(False, 2)
  33.         Dim mb As New MenuBar
  34.         Dim filemenu As New Menu
  35.         Dim file As MenuItem = New MenuItem("File")
  36.         file.Submenu = filemenu
  37.         mb.Append(file)
  39.         vbox.PackStart(mb, False, False, 0)
  41.         Dim table As New Table(5, 4, True)
  43.         table.Attach(New Button("Cls"), 0, 1, 0, 1)
  44.         table.Attach(New Button("Bck"), 1, 2, 0, 1)
  45.         table.Attach(New Label(), 2, 3, 0, 1)
  46.         table.Attach(New Button("Close"), 3, 4, 0, 1)
  48.         table.Attach(New Button("7"), 0, 1, 1, 2)
  49.         table.Attach(New Button("8"), 1, 2, 1, 2)
  50.         table.Attach(New Button("9"), 2, 3, 1, 2)
  51.         table.Attach(New Button("/"), 3, 4, 1, 2)
  53.         table.Attach(New Button("4"), 0, 1, 2, 3)
  54.         table.Attach(New Button("5"), 1, 2, 2, 3)
  55.         table.Attach(New Button("6"), 2, 3, 2, 3)
  56.         table.Attach(New Button("*"), 3, 4, 2, 3)
  58.         table.Attach(New Button("1"), 0, 1, 3, 4)
  59.         table.Attach(New Button("2"), 1, 2, 3, 4)
  60.         table.Attach(New Button("3"), 2, 3, 3, 4)
  61.         table.Attach(New Button("-"), 3, 4, 3, 4)
  63.         table.Attach(New Button("0"), 0, 1, 4, 5)
  64.         table.Attach(New Button("."), 1, 2, 4, 5)
  65.         table.Attach(New Button("="), 2, 3, 4, 5)
  66.         table.Attach(New Button("+"), 3, 4, 4, 5)
  68.         vbox.PackStart(New Entry, False, False, 0)
  70.         vbox.PackEnd(table, True, True, 0)
  72.         Me.Add(vbox)
  74.     End Sub
  76.     Sub OnDelete(ByVal sender As Object, _
  77.             ByVal args As DeleteEventArgs)
  78.         Application.Quit
  79.     End Sub
  81.     Public Shared Sub Main
  83.         Application.Init
  84.         Dim app As New GtkVBApp
  85.         Application.Run
  87.     End Sub
  89. End Class

我们使用Table小部件创建一个计算器框架。

  1. Dim table As New Table(5, 4, True)

我们创建一个具有 5 行 4 列的表小部件。 第三个参数是同质参数。 如果设置为true，则表中的所有小部件都具有相同的大小。 所有窗口小部件的大小等于表容器中最大的窗口小部件。

  1. table.Attach(New Button("Cls"), 0, 1, 0, 1)

我们在表格容器上附加一个按钮。 到表格的左上方单元格。 前两个参数是单元格的左侧和右侧，后两个参数是单元格的顶部和左侧。

  1. vbox.PackEnd(table, True, True, 0)

我们将表格小部件打包到垂直框中。

布局管理 - 图3

图：计算机骨架

窗口

接下来，我们将创建一个更高级的示例。 我们显示一个窗口，可以在 JDeveloper IDE 中找到它。

  1. ' ZetCode Mono Visual Basic GTK# tutorial
  2. '
  3. ' This is a more complicated layout example.
  4. ' We use Alignment and Table widgets. 
  5. '
  6. ' author jan bodnar
  7. ' last modified May 2009
  8. ' website www.zetcode.com
  10. Imports Gtk
  12. Public Class GtkVBApp
  13.     Inherits Window
  15.     Public Sub New
  17.         MyBase.New("Windows")
  19.         Me.InitUI
  21.         Me.SetDefaultSize(300, 250)
  22.         Me.SetPosition(WindowPosition.Center)
  23.         AddHandler Me.DeleteEvent, AddressOf Me.OnDelete
  25.         Me.ShowAll 
  27.     End Sub
  29.     Private Sub InitUI
  31.         Me.BorderWidth = 15
  33.         Dim table As New Table(8, 4, False)
  34.         table.ColumnSpacing = 3
  36.         Dim title As New Label("Windows")
  38.         Dim halign As New Alignment(0, 0, 0, 0)
  39.         halign.Add(title)
  41.         table.Attach(halign, 0, 1, 0, 1, AttachOptions.Fill, _
  42.             AttachOptions.Fill, 0, 0)
  44.         Dim frame As New Frame
  45.         table.Attach(frame, 0, 2, 1, 3, AttachOptions.Fill Or AttachOptions.Expand, _
  46.             AttachOptions.Fill Or AttachOptions.Expand, 1, 1)
  48.         Dim activate As New Button("Activate")
  49.         activate.SetSizeRequest(50, 30)
  50.         table.Attach(activate, 3, 4, 1, 2, AttachOptions.Fill, _
  51.             AttachOptions.Shrink, 1, 1)
  53.         Dim valign As New Alignment(0, 0, 0, 0)
  54.         Dim close As New Button("Close")
  55.         close.SetSizeRequest(70, 30)
  56.         valign.Add(close)
  57.         table.SetRowSpacing(1, 3)
  58.         table.Attach(valign, 3, 4, 2, 3, AttachOptions.Fill, _
  59.             AttachOptions.Fill Or AttachOptions.Expand, 1, 1)
  61.         Dim halign2 As New Alignment(0, 1, 0, 0)
  62.         Dim help As New Button("Help")
  63.         help.SetSizeRequest(70, 30)
  64.         halign2.Add(help)
  65.         table.SetRowSpacing(3, 6)
  66.         table.Attach(halign2, 0, 1, 4, 5, AttachOptions.Fill, _
  67.             AttachOptions.Fill, 0, 0)
  69.         Dim ok As New Button("OK")
  70.         ok.SetSizeRequest(70, 30)
  71.         table.Attach(ok, 3, 4, 4, 5, AttachOptions.Fill, _
  72.             AttachOptions.Fill, 0, 0)
  74.         Me.Add(table)
  76.     End Sub
  78.     Sub OnDelete(ByVal sender As Object, _
  79.             ByVal args As DeleteEventArgs)
  80.         Application.Quit
  81.     End Sub
  83.     Public Shared Sub Main
  85.         Application.Init
  86.         Dim app As New GtkVBApp
  87.         Application.Run
  89.     End Sub
  91. End Class

该代码示例显示了如何在 GTK# 中创建类似的窗口。

  1. Dim table As New Table(8, 4, False)
  2. table.ColumnSpacing = 3

该示例基于Table容器。 列之间将有 3px 的间隔。

  1. Dim title As New Label("Windows")
  3. Dim halign As New Alignment(0, 0, 0, 0)
  4. halign.Add(title)
  6. table.Attach(halign, 0, 1, 0, 1, AttachOptions.Fill, _
  7.     AttachOptions.Fill, 0, 0)

这段代码创建了一个向左对齐的标签。 标签放置在Table容器的第一行中。

  1. Dim frame As New Frame
  2. table.Attach(frame, 0, 2, 1, 3, AttachOptions.Fill Or AttachOptions.Expand, _
  3.     AttachOptions.Fill Or AttachOptions.Expand, 1, 1)

框架视图小部件跨越两行两列。 我们使小部件不可编辑并隐藏光标。

  1. Dim valign As New Alignment(0, 0, 0, 0)
  2. Dim close As New Button("Close")
  3. close.SetSizeRequest(70, 30)
  4. valign.Add(close)
  5. table.SetRowSpacing(1, 3)
  6. table.Attach(valign, 3, 4, 2, 3, AttachOptions.Fill, _
  7.     AttachOptions.Fill Or AttachOptions.Expand, 1, 1)

我们将关闭按钮放在框架小部件旁边，进入第四列。 （我们从零开始计数）将按钮添加到对齐小部件中，以便可以将其对齐到顶部。

布局管理 - 图4

图：窗口

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