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

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

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

GtkFixed

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

  1. <?php
  3. /* 
  4. ZetCode PHP GTK tutorial
  6. In this program, we lay out widgets
  7. using absolute positioning.
  9. author: Jan Bodnar
  10. website: www.zetcode.com
  11. last modified: September 2011
  12. */
  14. class Example extends GtkWindow { 
  16.     public function __construct() { 
  18.         parent::__construct(); 
  20.         $this->init_ui();
  22.     } 
  24.     public function init_ui() {
  26.         $this->set_title('Fixed');         
  27.         $this->connect_simple('destroy', array('gtk', 'main_quit')); 
  29.         $this->modify_bg(Gtk::STATE_NORMAL, new GdkColor(6400, 6400, 6440));
  31.         $bardejov = GtkImage::new_from_file("bardejov.jpg");
  32.         $rotunda = GtkImage::new_from_file("rotunda.jpg");
  33.         $mincol = GtkImage::new_from_file("mincol.jpg");
  35.         $fixed = new GtkFixed();
  36.         $fixed->put($bardejov, 20, 20);
  37.         $fixed->put($rotunda, 40, 160);
  38.         $fixed->put($mincol, 170, 50);
  40.         $this->add($fixed);        
  42.         $this->set_default_size(300, 280); 
  43.         $this->set_position(GTK::WIN_POS_CENTER);
  44.         $this->show_all();         
  46.     }
  47. } 
  49. new Example(); 
  50. Gtk::main();
  52. ?>

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

  1. $this->modify_bg(Gtk::STATE_NORMAL, new GdkColor(6400, 6400, 6440));

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

  1. $bardejov = GtkImage::new_from_file("bardejov.jpg");

GtkImage是用于显示图像的小部件。 图片是从磁盘上的文件加载的。

  1. $fixed = new GtkFixed();

我们创建GtkFixed容器。

  1. $fixed->put($bardejov, 20, 20);

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

  1. w.add(fixed);

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

PHP GTK 中的布局管理 - 图1

图：固定

按钮

在此代码示例中，我们将使用垂直框，水平框和对齐小部件。 水平框将小部件排列为一行。 同样，垂直框将其小部件放在一列中。 Alignment容器控制其子窗口小部件的对齐方式和大小。

  1. <?php
  3. /* 
  4. ZetCode PHP GTK tutorial
  6. In this program, we position two buttons
  7. in the bottom right corner of the window.
  8. We use horizontal and vertical boxes.
  10. author: Jan Bodnar
  11. website: www.zetcode.com
  12. last modified: August 2011
  13. */
  15. class Example extends GtkWindow { 
  17.     public function __construct() { 
  19.         parent::__construct(); 
  21.         $this->init_ui();
  23.     } 
  25.     public function init_ui() {
  27.         $this->set_title('Buttons');         
  28.         $this->connect_simple('destroy', array('gtk', 'main_quit')); 
  29.         $this->set_border_width(3);
  31.         $vbox = new GtkVBox(false, 5);
  32.         $hbox = new GtkHBox(true, 3);
  34.         $frame = new GtkFrame();
  35.         $vbox->pack_start($frame, true, true, 0);
  37.         $okButton = new GtkButton("OK");
  38.         $okButton->set_size_request(70, 30);
  39.         $closeButton = new GtkButton("Close");
  41.         $hbox->add($okButton);
  42.         $hbox->add($closeButton);
  44.         $halign = new GtkAlignment(1, 0, 0, 0);
  45.         $halign->add($hbox);
  46.         $vbox->pack_start($halign, false, false, 3);
  48.         $this->add($vbox);        
  50.         $this->set_default_size(260, 150); 
  51.         $this->set_position(GTK::WIN_POS_CENTER);
  52.         $this->show_all();          
  53.     }
  54. } 
  56. new Example(); 
  57. Gtk::main();
  59. ?>

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

  1. $vbox = new GtkVBox(false, 5);

将创建一个垂直框容器。 我们将同构成员设置为false。 这意味着放在垂直框中的窗口小部件将具有相同的大小。 小部件之间的垂直间距设置为 5 像素。

  1. $frame = new GtkFrame();

在这里，我们创建一个GtkFrame小部件。 该小部件的目的是占用两个按钮上方的空间。

  1. $vbox->pack_start($frame, true, true, 0);

在这里，我们将框架小部件放入垂直框中。 该方法的第一个参数是小部件，它被放置在框中。 以下三个参数是expand，fill和padding。 expand参数设置为true，这意味着将在小部件周围分配可用空间。 当fill参数设置为true时，小部件实际上会占用其周围的所有可用空间。 子窗口小部件周围没有填充。

  1. $hbox = new GtkHBox(true, 3);

此代码行创建一个水平框。 框内的所有小部件都将具有相同的大小。 小部件之间的水平间隔为 3px。

  1. $okButton = new GtkButton("OK");
  2. $okButton->set_size_request(70, 30);
  3. $closeButton = new GtkButton("Close");
  5. $hbox->add($okButton);
  6. $hbox->add($closeButton);

我们创建两个按钮，并将它们放在水平框中。

  1. $halign = new GtkAlignment(1, 0, 0, 0);
  2. $halign->add($hbox);
  3. $vbox->pack_start($halign, false, false, 3);

这将创建一个对齐容器，它将其子窗口小部件放在右侧。 设置为 1.0 的xalign成员会将所有可用空间放在水平框的左侧。 这将向右推两个按钮。 我们将水平框添加到对齐容器中，然后将对齐容器包装到垂直框中。 我们必须记住，对齐容器仅包含一个子窗口小部件。 这就是为什么我们必须使用水平框。

PHP GTK 中的布局管理 - 图2

图：按钮

计算器骨架

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

  1. <?php
  3. /* 
  4. ZetCode PHP GTK tutorial
  6. In this program we create a skeleton of
  7. a calculator. We use the GtkTable widget.
  9. author: Jan Bodnar
  10. website: www.zetcode.com
  11. last modified: August 2011
  12. */
  14. class Example extends GtkWindow { 
  16.     public function __construct() { 
  18.         parent::__construct(); 
  20.         $this->init_ui();
  22.     } 
  24.     public function init_ui() {
  26.         $this->set_title('Calculator');         
  27.         $this->connect_simple('destroy', array('gtk', 'main_quit')); 
  29.         $vbox = new GtkVBox(false, 2);
  31.         $mb = new GtkMenubar();
  32.         $filemenu = new GtkMenu();
  33.         $filemi = new GtkMenuItem("File");
  34.         $filemi->set_submenu($filemenu);
  35.         $mb->append($filemi);
  37.         $vbox->pack_start($mb, false, false, 0);
  39.         $table = new GtkTable(5, 4, true);
  41.         $table->attach_defaults(new GtkButton("Cls"), 0, 1, 0, 1);
  42.         $table->attach_defaults(new GtkButton("Bck"), 1, 2, 0, 1);
  43.         $table->attach_defaults(new GtkLabel(), 2, 3, 0, 1);
  44.         $table->attach_defaults(new GtkButton("Close"), 3, 4, 0, 1);
  46.         $table->attach_defaults(new GtkButton("7"), 0, 1, 1, 2);
  47.         $table->attach_defaults(new GtkButton("8"), 1, 2, 1, 2);
  48.         $table->attach_defaults(new GtkButton("9"), 2, 3, 1, 2);
  49.         $table->attach_defaults(new GtkButton("/"), 3, 4, 1, 2);
  51.         $table->attach_defaults(new GtkButton("4"), 0, 1, 2, 3);
  52.         $table->attach_defaults(new GtkButton("5"), 1, 2, 2, 3);
  53.         $table->attach_defaults(new GtkButton("6"), 2, 3, 2, 3);
  54.         $table->attach_defaults(new GtkButton("*"), 3, 4, 2, 3);
  56.         $table->attach_defaults(new GtkButton("1"), 0, 1, 3, 4);
  57.         $table->attach_defaults(new GtkButton("2"), 1, 2, 3, 4);
  58.         $table->attach_defaults(new GtkButton("3"), 2, 3, 3, 4);
  59.         $table->attach_defaults(new GtkButton("-"), 3, 4, 3, 4);
  61.         $table->attach_defaults(new GtkButton("0"), 0, 1, 4, 5);
  62.         $table->attach_defaults(new GtkButton("."), 1, 2, 4, 5);
  63.         $table->attach_defaults(new GtkButton("="), 2, 3, 4, 5);
  64.         $table->attach_defaults(new GtkButton("+"), 3, 4, 4, 5);
  66.         $vbox->pack_start(new GtkEntry(), false, false, 0);
  67.         $vbox->pack_end($table, true, true, 0);
  69.         $this->add($vbox);        
  71.         $this->set_default_size(300, 250); 
  72.         $this->set_position(GTK::WIN_POS_CENTER);
  73.         $this->show_all();         
  75.     }
  76. } 
  78. new Example(); 
  79. Gtk::main();
  81. ?>

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

  1. $table = new GtkTable(5, 4, true);

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

  1. $table->attach_defaults(new GtkButton("Cls"), 0, 1, 0, 1);

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

  1. $vbox->pack_end($table, true, true, 0);

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

PHP GTK 中的布局管理 - 图3

图：计算机骨架

窗口

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

  1. <?php
  3. /* 
  4. ZetCode PHP GTK tutorial
  6. This is a more complicated layout example.
  7. We use GtkAlignment and GtkTable widgets. 
  9. author: Jan Bodnar
  10. website: www.zetcode.com
  11. last modified: August 2011
  12. */
  14. class Example extends GtkWindow { 
  16.     public function __construct() { 
  18.         parent::__construct(); 
  20.         $this->init_ui();
  21.     } 
  23.     public function init_ui() {
  25.         $this->set_title('Windows');         
  26.         $this->connect_simple('destroy', array('gtk', 'main_quit')); 
  28.         $this->set_border_width(15);
  30.         $table = new GtkTable(8, 4, false);
  31.         $table->set_col_spacings(3);
  33.         $title = new GtkLabel("Windows");
  35.         $halign = new GtkAlignment(0, 0, 0, 0);
  36.         $halign->add($title);        
  37.         $table->attach($halign, 0, 1, 0, 1, GTK::FILL, 
  38.             GTK::FILL, 0, 0);
  40.         $frame = new GtkFrame();
  41.         $table->attach($frame, 0, 2, 1, 3, GTK::FILL | Gtk::EXPAND,
  42.             GTK::FILL | GTK::EXPAND, 1, 1);
  44.         $activate = new GtkButton("Activate");
  45.         $activate->set_size_request(50, 30);
  46.         $table->attach($activate, 3, 4, 1, 2, GTK::FILL,
  47.             GTK::SHRINK, 1, 1);
  49.         $valign = new GtkAlignment(0, 0, 0, 0);
  50.         $close = new GtkButton("Close");
  51.         $close->set_size_request(70, 30);
  52.         $valign->add($close);
  53.         $table->set_row_spacing(1, 3);
  54.         $table->attach($valign, 3, 4, 2, 3, Gtk::FILL,
  55.             Gtk::FILL | Gtk::EXPAND, 1, 1);
  57.         $halign2 = new GtkAlignment(0, 1, 0, 0);
  58.         $help = new GtkButton("Help");
  59.         $help->set_size_request(70, 30);
  60.         $halign2->add($help);
  61.         $table->set_row_spacing(3, 6);
  62.         $table->attach($halign2, 0, 1, 4, 5, Gtk::FILL,
  63.             Gtk::FILL, 0, 0);
  65.         $ok = new GtkButton("OK");
  66.         $ok->set_size_request(70, 30);
  67.         $table->attach($ok, 3, 4, 4, 5, Gtk::FILL,
  68.             Gtk::FILL, 0, 0);
  70.         $this->add($table);        
  72.         $this->set_default_size(300, 250); 
  73.         $this->set_position(GTK::WIN_POS_CENTER);
  74.         $this->show_all();         
  75.     }
  76. } 
  78. new Example(); 
  79. Gtk::main();
  81. ?>

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

  1. $table = new GtkTable(8, 4, false);
  2. $table->set_col_spacings(3);

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

  1. $title = new GtkLabel("Windows");
  3. $halign = new GtkAlignment(0, 0, 0, 0);
  4. $halign->add($title);        
  5. $table->attach($halign, 0, 1, 0, 1, GTK::FILL, 
  6.     GTK::FILL, 0, 0);

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

  1. $frame = new GtkFrame();
  2. $table->attach($frame, 0, 2, 1, 3, GTK::FILL | Gtk::EXPAND,
  3.     GTK::FILL | GTK::EXPAND, 1, 1);

框架小部件跨越两行两列。 它将消耗其周围的所有可用空间。 因此，占用了窗口的大部分区域。

  1. $valign = new GtkAlignment(0, 0, 0, 0);
  2. $close = new GtkButton("Close");
  3. $close->set_size_request(70, 30);
  4. $valign->add($close);
  5. $table->set_row_spacing(1, 3);
  6. $table->attach($valign, 3, 4, 2, 3, Gtk::FILL,
  7.     Gtk::FILL | Gtk::EXPAND, 1, 1);

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

  1. $halign2 = new GtkAlignment(0, 1, 0, 0);
  2. $help = new GtkButton("Help");
  3. $help->set_size_request(70, 30);
  4. $halign2->add($help);
  5. $table->set_row_spacing(3, 6);
  6. $table->attach($halign2, 0, 1, 4, 5, Gtk::FILL,
  7.     Gtk::FILL, 0, 0);

将帮助按钮放置在对齐小部件中，以便可以在其表格单元格中使其对齐。 它位于第一列第五行。

  1. $ok = new GtkButton("OK");
  2. $ok->set_size_request(70, 30);
  3. $table->attach($ok, 3, 4, 4, 5, Gtk::FILL,
  4.     Gtk::FILL, 0, 0);

最后，单击确定按钮。 它位于第四列和第五行。

PHP GTK 中的布局管理 - 图4

图：窗口

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