# Java Gnome 中的布局管理 > 原文： [http://zetcode.com/gui/javagnome/layout/](http://zetcode.com/gui/javagnome/layout/) 在本章中，我們將展示如何在窗口或對話框中布置窗口小部件。 在設計應用的 GUI 時，我們決定要使用哪些小部件以及如何在應用中組織這些小部件。 為了組織小部件，我們使用專門的不可見小部件，稱為布局容器。 在本章中，我們將提到`Alignment`，`Fixed`，`VBox`，`HBox`和`Table`。 ## `Fixed` `Fixed`容器將子窗口小部件放置在固定位置并具有固定大小。 此容器不執行自動布局管理。 在大多數應用中，我們不使用此容器。 我們在某些專業領域使用它。 例如游戲，使用圖表的專用應用，可以移動的可調整大小的組件（如電子表格應用中的圖表），小型教育示例。 `fixed.java` ```java package com.zetcode; import java.io.FileNotFoundException; import org.gnome.gdk.Color; import org.gnome.gdk.Event; import org.gnome.gdk.Pixbuf; import org.gnome.gtk.Fixed; import org.gnome.gtk.Gtk; import org.gnome.gtk.Image; import org.gnome.gtk.StateType; import org.gnome.gtk.Widget; import org.gnome.gtk.Window; import org.gnome.gtk.WindowPosition; /** * ZetCode Java Gnome tutorial * * This program shows how to use * the Fixed container. * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class GAbsolute extends Window { private Pixbuf rotunda; private Pixbuf bardejov; private Pixbuf mincol; public GAbsolute() { setTitle("Absolute"); initUI(); connect(new Window.DeleteEvent() { public boolean onDeleteEvent(Widget source, Event event) { Gtk.mainQuit(); return false; } }); setDefaultSize(300, 280); setPosition(WindowPosition.CENTER); showAll(); } public void initUI() { modifyBackground(StateType.NORMAL, new Color(15000, 15000, 15000)); try { bardejov = new Pixbuf("bardejov.jpg"); rotunda = new Pixbuf("rotunda.jpg"); mincol = new Pixbuf("mincol.jpg"); } catch (FileNotFoundException e) { System.out.println("Could not load images."); System.out.println(e.getMessage()); } 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); } public static void main(String[] args) { Gtk.init(args); new GAbsolute(); Gtk.main(); } } ``` 在我們的示例中，我們在窗口上顯示了三個小圖像。 我們明確指定放置這些圖像的 x，y 坐標。 ```java modifyBackground(StateType.NORMAL, new Color(15000, 15000, 15000)); ``` 為了獲得更好的視覺體驗，我們將背景色更改為深灰色。 ```java bardejov = new Pixbuf("bardejov.jpg"); ``` 我們將圖像從磁盤加載到`Pixbuf`對象。 ```java Image image1 = new Image(bardejov); Image image2 = new Image(rotunda); Image image3 = new Image(mincol); ``` `Image`是用于顯示圖像的小部件。 它在構造器中使用`Pixbuf`對象。 ```java Fixed fix = new Fixed(); ``` 我們創建`Fixed`容器。 ```java fix.put(image1, 20, 20); ``` 我們將第一個圖像放置在`x = 20`，`y = 20`坐標處。 ```java add(fix); ``` 最后，我們將`Fixed`容器添加到窗口中。  圖：固定 ## `Alignment` `Alignment`容器控制其子窗口小部件的對齊方式和大小。 `alignment.java` ```java package com.zetcode; import org.gnome.gdk.Event; import org.gnome.gtk.Alignment; import org.gnome.gtk.Button; import org.gnome.gtk.Gtk; import org.gnome.gtk.HBox; import org.gnome.gtk.Label; import org.gnome.gtk.VBox; import org.gnome.gtk.Widget; import org.gnome.gtk.Window; import org.gnome.gtk.WindowPosition; /** * ZetCode Java Gnome tutorial * * This program places two buttons * in the right bottom corner of * the window. * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class GAlignment extends Window { public GAlignment() { setTitle("Alignment"); initUI(); connect(new Window.DeleteEvent() { public boolean onDeleteEvent(Widget source, Event event) { Gtk.mainQuit(); return false; } }); setDefaultSize(260, 150); setPosition(WindowPosition.CENTER); showAll(); } public void initUI() { VBox vbox = new VBox(false, 5); HBox hbox = new HBox(true, 3); vbox.packStart(new Label("")); 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); setBorderWidth(5); } public static void main(String[] args) { Gtk.init(args); new GAlignment(); Gtk.main(); } } ``` 在代碼示例中，我們在窗口的右下角放置了兩個按鈕。 為此，我們使用一個水平框和一個垂直框以及一個對齊容器。 ```java vbox.packStart(new Label("")); ``` 該行將在垂直框中放置一個空標簽。 標簽水平和垂直擴展。 這將使附加到垂直框的下一個小部件出現在窗口底部。 ```java Button ok = new Button("OK"); ok.setSizeRequest(70, 30); Button close = new Button("Close"); hbox.add(ok); hbox.add(close); ``` 這兩個按鈕將添加到水平框中。 ```java Alignment halign = new Alignment(1, 0, 0, 0); halign.add(hbox); ``` 水平框將添加到對齊小部件。 對齊小部件將使按鈕向右對齊。 我們必須記住，對齊容器僅包含一個子窗口小部件。 這就是為什么我們必須使用盒子。 ```java vbox.packStart(halign, false, false, 3); ``` 對齊小部件包裝在垂直框中。  圖：對齊 ## `Table` `Table`小部件按行和列排列小部件。 `calculator.java` ```java package com.zetcode; import org.gnome.gdk.Event; import org.gnome.gtk.Button; import org.gnome.gtk.Entry; import org.gnome.gtk.Gtk; import org.gnome.gtk.Label; import org.gnome.gtk.Menu; import org.gnome.gtk.MenuBar; import org.gnome.gtk.MenuItem; import org.gnome.gtk.Table; import org.gnome.gtk.VBox; import org.gnome.gtk.Widget; import org.gnome.gtk.Window; import org.gnome.gtk.WindowPosition; /** * Java Gnome tutorial * * This program creates a calculator skeleton * with the Table container widget. * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class GCalculator extends Window { public GCalculator() { setTitle("Calculator"); initUI(); connect(new Window.DeleteEvent() { public boolean onDeleteEvent(Widget source, Event event) { Gtk.mainQuit(); return false; } }); setDefaultSize(250, 230); setPosition(WindowPosition.CENTER); showAll(); } public void initUI() { VBox vbox = new VBox(false, 2); MenuBar mb = new MenuBar(); Menu filemenu = new Menu(); MenuItem file = new MenuItem("File"); file.setSubmenu(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.packStart(table, true, true, 0); add(vbox); } public static void main(String[] args) { Gtk.init(args); new GCalculator(); Gtk.main(); } } ``` 我們使用`Table`小部件創建一個計算器框架。 ```java Table table = new Table(5, 4, true); ``` 我們創建一個具有 5 行 4 列的表小部件。 第三個參數是同質參數。 如果設置為`true`，則表中的所有小部件都具有相同的大小。 所有窗口小部件的大小等于表容器中最大的窗口小部件。 ```java table.attach(new Button("Cls"), 0, 1, 0, 1); ``` 我們在表格容器上附加一個按鈕。 到表格的左上方單元格。 前兩個參數是單元格的左側和右側，后兩個參數是單元格的頂部和左側。 換句話說，它到達表容器的第一個單元格。 在`0, 0`。 ```java vbox.packStart(new Entry(), false, false, 0); ``` 我們首先打包`Entry`小部件。 ```java vbox.packStart(table, true, true, 0); ``` 然后，我們添加表格小部件。 我們使其擴展所有剩余空間。  圖：計算機骨架 ## `fill`和`expand` 下面的示例說明`Box`容器的`fill`和`expand`參數之間的關系。 `boxes.java` ```java package com.zetcode; import org.gnome.gdk.Event; import org.gnome.gtk.Button; import org.gnome.gtk.Gtk; import org.gnome.gtk.HBox; import org.gnome.gtk.VBox; import org.gnome.gtk.Widget; import org.gnome.gtk.Window; import org.gnome.gtk.WindowPosition; /** * ZetCode Java Gnome tutorial * * This program explains the * relationship between the fill * and expand parameters of the Box * container. * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class GBoxes extends Window { public GBoxes() { setTitle("Boxes"); initUI(); connect(new Window.DeleteEvent() { public boolean onDeleteEvent(Widget source, Event event) { Gtk.mainQuit(); return false; } }); setDefaultSize(250, 150); setPosition(WindowPosition.CENTER); showAll(); } public void initUI() { VBox vbox = new VBox(false, 5); HBox hbox1 = new HBox(false, 0); HBox hbox2 = new HBox(false, 0); HBox hbox3 = new HBox(false, 0); Button button1 = new Button("Button"); Button button2 = new Button("Button"); Button button3 = new Button("Button"); hbox1.packStart(button1, false, false, 0); hbox2.packStart(button2, true, false, 0); hbox3.packStart(button3, true, true, 0); vbox.packStart(hbox1, false, false, 0); vbox.packStart(hbox2, false, false, 0); vbox.packStart(hbox3, false, false, 0); add(vbox); setBorderWidth(8); } public static void main(String[] args) { Gtk.init(args); new GBoxes(); Gtk.main(); } } ``` 在我們的代碼示例中，我們有一個垂直的基本框和另外三個水平的框。 我們有三個按鈕。 我們將看到`expand`和`fill`參數的組合將如何影響布局。 我們在垂直框內放置三個按鈕。 `packStart()`方法的第一個參數是小部件，我們將其放入容器中。 第二個參數是擴展，第三個參數是填充，最后一個參數是填充。 ```java hbox1.packStart(button1, false, false, 0); ``` 在這種情況下，`expand`和`fill`均為假。 該按鈕不會增長，并保持其初始位置。 ```java hbox2.packStart(button2, true, false, 0); ``` 在這里，`expand`參數設置為`true`。 此按鈕窗口小部件將獲得額外的空間，但窗口小部件不會增大或縮小。 因此，在我們的例子中，按鈕將水平居中并保持其初始大小。 ```java hbox3.packStart(button3, true, true, 0); ``` 最后，我們將兩個參數都設置為`true`。 這將導致按鈕占用分配給它的所有水平空間。  圖：展開和填充參數 這是 Java Gnome 中布局管理的第一部分。