GTK# 中的布局管理 · ZetCode 中文系列教程

# GTK# 中的布局管理 > 原文： [http://zetcode.com/gui/gtksharp/layout/](http://zetcode.com/gui/gtksharp/layout/) 在本章中，我們將展示如何在窗口或對話框中布置窗口小部件。在設計應用的 GUI 時，我們決定要使用哪些小部件以及如何在應用中組織這些小部件。為了組織窗口小部件，我們使用專門的不可見窗口小部件，稱為布局容器。在本章中，我們將提到`Alignment`，`Fixed`，`VBox`和`Table`。 ## `Fixed` `Fixed`容器將子窗口小部件放置在固定位置并具有固定大小。此容器不執行自動布局管理。在大多數應用中，我們不使用此容器。我們在某些專業領域使用它。例如游戲，使用圖表的專用應用，可以移動的可調整大小的組件（如電子表格應用中的圖表），小型教育示例。 `fixed.cs` ```cs using Gtk; using System; class SharpApp : Window { private Gdk.Pixbuf rotunda; private Gdk.Pixbuf bardejov; private Gdk.Pixbuf mincol; public SharpApp() : base("Fixed") { SetDefaultSize(300, 280); SetPosition(WindowPosition.Center); ModifyBg(StateType.Normal, new Gdk.Color(40, 40, 40)); DeleteEvent += delegate { Application.Quit(); }; try { bardejov = new Gdk.Pixbuf("bardejov.jpg"); rotunda = new Gdk.Pixbuf("rotunda.jpg"); mincol = new Gdk.Pixbuf("mincol.jpg"); } catch { Console.WriteLine("Images not found"); Environment.Exit(1); } Image image1 = new Image(bardejov); Image image2 = new Image(rotunda); Image image3 = new Image(mincol); Fixed fix = new Fixed(); fix.Put(image1, 20, 20); fix.Put(image2, 40, 160); fix.Put(image3, 170, 50); Add(fix); ShowAll(); } public static void Main() { Application.Init(); new SharpApp(); Application.Run(); } } ``` 在我們的示例中，我們在窗口上顯示了三個小圖像。我們明確指定放置這些圖像的 x，y 坐標。 ```cs ModifyBg(StateType.Normal, new Gdk.Color(40, 40, 40)); ``` 為了獲得更好的視覺體驗，我們將背景色更改為深灰色。 ```cs bardejov = new Gdk.Pixbuf("bardejov.jpg"); ``` 我們將圖像從磁盤加載到`Gdk.Pixbuf`對象。 ```cs Image image1 = new Image(bardejov); Image image2 = new Image(rotunda); Image image3 = new Image(mincol); ``` `Image`是用于顯示圖像的小部件。它在構造器中使用`Gdk.Pixbuf`對象。 ```cs Fixed fix = new Fixed(); ``` 我們創建`Fixed`容器。 ```cs fix.Put(image1, 20, 20); ``` 我們將第一個圖像放置在`x = 20`，`y = 20`坐標處。 ```cs Add(fix); ``` 最后，我們將`Fixed`容器添加到窗口中。 ![Fixed](https://img.kancloud.cn/e0/73/e073300df12029fbff7cbb73a9b6288e_308x308.jpg) 圖：固定 ## `Alignment` `Alignment`容器控制其子窗口小部件的對齊方式和大小。 `alignment.cs` ```cs using Gtk; using System; class SharpApp : Window { public SharpApp() : base("Alignment") { SetDefaultSize(260, 150); SetPosition(WindowPosition.Center); DeleteEvent += delegate { Application.Quit(); }; VBox vbox = new VBox(false, 5); HBox hbox = new HBox(true, 3); Alignment valign = new Alignment(0, 1, 0, 0); vbox.PackStart(valign); Button ok = new Button("OK"); ok.SetSizeRequest(70, 30); Button close = new Button("Close"); hbox.Add(ok); hbox.Add(close); Alignment halign = new Alignment(1, 0, 0, 0); halign.Add(hbox); vbox.PackStart(halign, false, false, 3); Add(vbox); ShowAll(); } public static void Main() { Application.Init(); new SharpApp(); Application.Run(); } } ``` 在代碼示例中，我們在窗口的右下角放置了兩個按鈕。為此，我們使用一個水平框和一個垂直框以及兩個對齊容器。 ```cs Alignment valign = new Alignment(0, 1, 0, 0); ``` 這會將子窗口小部件置于底部。 ```cs vbox.PackStart(valign); ``` 在這里，我們將`Alignment`小部件放置到垂直框中。 ```cs HBox hbox = new HBox(true, 3); ... Button ok = new Button("OK"); ok.SetSizeRequest(70, 30); Button close = new Button("Close"); hbox.Add(ok); hbox.Add(close); ``` 我們創建一個水平框，并在其中放置兩個按鈕。 ```cs Alignment halign = new Alignment(1, 0, 0, 0); halign.Add(hbox); vbox.PackStart(halign, false, false, 3); ``` 這將創建一個對齊容器，它將其子窗口小部件放在右側。我們將水平框添加到對齊容器中，然后將對齊容器包裝到垂直框中。我們必須記住，對齊容器僅包含一個子窗口小部件。這就是為什么我們必須使用盒子。 ![Alignment](https://img.kancloud.cn/7f/db/7fdb8fcf675a39b8393870114e5b8d84_268x178.jpg) 圖：對齊 ## `Table` `Table`小部件按行和列排列小部件。 `calculator.cs` ```cs using Gtk; using System; class SharpApp : Window { public SharpApp() : base("Calculator") { SetDefaultSize(250, 230); SetPosition(WindowPosition.Center); DeleteEvent += delegate { Application.Quit(); }; VBox vbox = new VBox(false, 2); MenuBar mb = new MenuBar(); Menu filemenu = new Menu(); MenuItem file = new MenuItem("File"); file.Submenu = filemenu; mb.Append(file); vbox.PackStart(mb, false, false, 0); Table table = new Table(5, 4, true); table.Attach(new Button("Cls"), 0, 1, 0, 1); table.Attach(new Button("Bck"), 1, 2, 0, 1); table.Attach(new Label(), 2, 3, 0, 1); table.Attach(new Button("Close"), 3, 4, 0, 1); table.Attach(new Button("7"), 0, 1, 1, 2); table.Attach(new Button("8"), 1, 2, 1, 2); table.Attach(new Button("9"), 2, 3, 1, 2); table.Attach(new Button("/"), 3, 4, 1, 2); table.Attach(new Button("4"), 0, 1, 2, 3); table.Attach(new Button("5"), 1, 2, 2, 3); table.Attach(new Button("6"), 2, 3, 2, 3); table.Attach(new Button("*"), 3, 4, 2, 3); table.Attach(new Button("1"), 0, 1, 3, 4); table.Attach(new Button("2"), 1, 2, 3, 4); table.Attach(new Button("3"), 2, 3, 3, 4); table.Attach(new Button("-"), 3, 4, 3, 4); table.Attach(new Button("0"), 0, 1, 4, 5); table.Attach(new Button("."), 1, 2, 4, 5); table.Attach(new Button("="), 2, 3, 4, 5); table.Attach(new Button("+"), 3, 4, 4, 5); vbox.PackStart(new Entry(), false, false, 0); vbox.PackEnd(table, true, true, 0); Add(vbox); ShowAll(); } public static void Main() { Application.Init(); new SharpApp(); Application.Run(); } } ``` 我們使用`Table`小部件創建一個計算器框架。 ```cs Table table = new Table(5, 4, true); ``` 我們創建一個具有 5 行 4 列的表小部件。第三個參數是齊次參數。如果設置為`true`，則表中的所有小部件都具有相同的大小。所有窗口小部件的大小等于表容器中最大的窗口小部件。 ```cs table.Attach(new Button("Cls"), 0, 1, 0, 1); ``` 我們在表格容器上附加一個按鈕。到表格的左上方單元格。前兩個參數是單元格的左側和右側，后兩個參數是單元格的頂部和左側。 ```cs vbox.PackEnd(table, true, true, 0); ``` 我們將表格小部件打包到垂直框中。 ![Calculator skeleton](https://img.kancloud.cn/f3/b4/f3b4e531bcca2399111d89dd118ab7ab_258x258.jpg) 圖：計算機骨架 ## 窗口接下來，我們將創建一個更高級的示例。我們顯示一個窗口，可以在 JDeveloper IDE 中找到它。 `windows.cs` ```cs using Gtk; using System; class SharpApp : Window { public SharpApp() : base("Windows") { SetDefaultSize(300, 250); SetPosition(WindowPosition.Center); BorderWidth = 15; DeleteEvent += delegate { Application.Quit(); }; Table table = new Table(8, 4, false); table.ColumnSpacing = 3; Label title = new Label("Windows"); Alignment halign = new Alignment(0, 0, 0, 0); halign.Add(title); table.Attach(halign, 0, 1, 0, 1, AttachOptions.Fill, AttachOptions.Fill, 0, 0); TextView wins = new TextView(); wins.ModifyFg(StateType.Normal, new Gdk.Color(20, 20, 20)); wins.CursorVisible = false; table.Attach(wins, 0, 2, 1, 3, AttachOptions.Fill | AttachOptions.Expand, AttachOptions.Fill | AttachOptions.Expand, 1, 1); Button activate = new Button("Activate"); activate.SetSizeRequest(50, 30); table.Attach(activate, 3, 4, 1, 2, AttachOptions.Fill, AttachOptions.Shrink, 1, 1); Alignment valign = new Alignment(0, 0, 0, 0); Button close = new Button("Close"); close.SetSizeRequest(70, 30); valign.Add(close); table.SetRowSpacing(1, 3); table.Attach(valign, 3, 4, 2, 3, AttachOptions.Fill, AttachOptions.Fill | AttachOptions.Expand, 1, 1); Alignment halign2 = new Alignment(0, 1, 0, 0); Button help = new Button("Help"); help.SetSizeRequest(70, 30); halign2.Add(help); table.SetRowSpacing(3, 6); table.Attach(halign2, 0, 1, 4, 5, AttachOptions.Fill, AttachOptions.Fill, 0, 0); Button ok = new Button("OK"); ok.SetSizeRequest(70, 30); table.Attach(ok, 3, 4, 4, 5, AttachOptions.Fill, AttachOptions.Fill, 0, 0); Add(table); ShowAll(); } public static void Main() { Application.Init(); new SharpApp(); Application.Run(); } } ``` 該代碼示例顯示了如何在 GTK# 中創建類似的窗口。 ```cs Table table = new Table(8, 4, false); table.ColumnSpacing = 3; ``` 該示例基于`Table`容器。列之間將有 3px 的間距。 ```cs Label title = new Label("Windows"); Alignment halign = new Alignment(0, 0, 0, 0); halign.Add(title); table.Attach(halign, 0, 1, 0, 1, AttachOptions.Fill, AttachOptions.Fill, 0, 0); ``` 這段代碼創建了一個向左對齊的標簽。標簽放置在`Table`容器的第一行中。 ```cs TextView wins = new TextView(); wins.ModifyFg(StateType.Normal, new Gdk.Color(20, 20, 20)); wins.CursorVisible = false; table.Attach(wins, 0, 2, 1, 3, AttachOptions.Fill | AttachOptions.Expand, AttachOptions.Fill | AttachOptions.Expand, 1, 1); ``` 文本視圖小部件跨越兩行兩列。我們使小部件不可編輯并隱藏光標。 ```cs Alignment valign = new Alignment(0, 0, 0, 0); Button close = new Button("Close"); close.SetSizeRequest(70, 30); valign.Add(close); table.SetRowSpacing(1, 3); table.Attach(valign, 3, 4, 2, 3, AttachOptions.Fill, AttachOptions.Fill | AttachOptions.Expand, 1, 1); ``` 我們將關閉按鈕放在文本視圖小部件旁邊的第四列中。（我們從零開始計數）將按鈕添加到對齊小部件中，以便可以將其對齊到頂部。 ![Windows](https://img.kancloud.cn/28/82/2882f5030b0b821bb79ced8c120a67be_308x278.jpg) 圖：窗口在本章中，我們介紹了 GTK# 小部件的布局管理。