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

# GTK+ 布局管理 > 原文： [http://zetcode.com/gui/gtk2/gtklayoutmanagement/](http://zetcode.com/gui/gtk2/gtklayoutmanagement/) 在本章中，我們將展示如何在窗口或對話框中布置窗口小部件。在設計應用的 UI 時，我們決定要使用哪些小部件以及如何組織這些小部件。為了組織窗口小部件，我們使用稱為布局容器的專用非可見窗口小部件。在本章中，我們將提及`GtkAlignment`，`GtkFixed`，`GtkVBox`和`GtkTable`。 ## `GtkFixed` `GtkFixed`容器將子窗口小部件放置在固定位置并具有固定大小。此容器不執行自動布局管理。因此，它不適用于翻譯，字體更改或主題。在大多數應用中，我們不使用`GtkFixed`容器。可能會有一些專門的區域可以使用容器（例如，定位圖或圖像）。 `fixed.c` ```c #include <gtk/gtk.h> int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *fixed; GtkWidget *btn1; GtkWidget *btn2; GtkWidget *btn3; gtk_init(&argc, &argv); window = gtk_window_new(GTK_WINDOW_TOPLEVEL); gtk_window_set_title(GTK_WINDOW(window), "GtkFixed"); gtk_window_set_default_size(GTK_WINDOW(window), 300, 200); gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER); fixed = gtk_fixed_new(); gtk_container_add(GTK_CONTAINER(window), fixed); btn1 = gtk_button_new_with_label("Button"); gtk_fixed_put(GTK_FIXED(fixed), btn1, 150, 50); gtk_widget_set_size_request(btn1, 80, 30); btn2 = gtk_button_new_with_label("Button"); gtk_fixed_put(GTK_FIXED(fixed), btn2, 15, 15); gtk_widget_set_size_request(btn2, 80, 30); btn3 = gtk_button_new_with_label("Button"); gtk_fixed_put(GTK_FIXED(fixed), btn3, 100, 100); gtk_widget_set_size_request(btn3, 80, 30); g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 在我們的示例中，我們創建了三個按鈕并將它們放置在固定坐標上。當我們調整應用窗口的大小時，按鈕將保持其大小和位置。 ```c fixed = gtk_fixed_new(); ``` `get_fixed_new()`函數創建一個`GtkFixed`容器。 ```c gtk_fixed_put(GTK_FIXED(fixed), btn1, 150, 50); ``` 使用`gtk_fixed_put()`函數將第一個按鈕放置在坐標`x = 150`和`y = 50`處。 ```c gtk_widget_set_size_request(btn1, 80, 30); ``` `gtk_widget_set_size_request()`設置小部件的最小大小。它是小部件可以接受的最小大小，同時仍可以正常運行并正確繪制自身。 ![GtkFixed container](https://img.kancloud.cn/e8/dd/e8dd9dbcac91c9870fa64946f9ec8bf4_302x226.jpg) 圖：`GtkFixed`容器 ## `GtkAlignment` `GtkAlignment`控制小部件的對齊。此外，它可以管理其縮放比例。 `bottomleft.c` ```c #include <gtk/gtk.h> int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *align; GtkWidget *lbl; gtk_init(&argc, &argv); window = gtk_window_new(GTK_WINDOW_TOPLEVEL); gtk_window_set_title(GTK_WINDOW(window), "GtkAlignment"); gtk_window_set_default_size(GTK_WINDOW(window), 300, 200); gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER); gtk_container_set_border_width(GTK_CONTAINER(window), 5); align = gtk_alignment_new(0, 1, 0, 0); lbl = gtk_label_new("bottom-left"); gtk_container_add(GTK_CONTAINER(align), lbl); gtk_container_add(GTK_CONTAINER(window), align); g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 在示例中，標簽位于窗口的左下角。 ```c align = gtk_alignment_new(0, 1, 0, 0); ``` `gtk_alignment_new()`函數創建`GtkAlignment`容器。參數的取值范圍是 0 到 1。第一個參數是水平對齊方式，其中 0 左，1 右。第二個參數是垂直對齊方式，其中 0 是頂部，1 是底部。第三個參數是水平比例尺，它是子窗口小部件水平擴展以填充未使用空間的數量。值為 0 表示子窗口小部件永遠不應擴展。最后一個參數是垂直刻度。 ```c lbl = gtk_label_new("bottom-left"); ``` 使用`gtk_label_new()`函數創建標簽窗口小部件。 ```c gtk_container_add(GTK_CONTAINER(align), lbl); ``` 標簽被添加到`GtkAlignment`容器中。 ```c gtk_container_add(GTK_CONTAINER(window), align); ``` 最后，將對齊容器放入窗口中。 ![GtkAlignment](https://img.kancloud.cn/fe/a9/fea9c12f46e7e0a66d42edbf96de53d1_302x226.jpg) 圖：`GtkAlignment` ## `GtkVBox` `GtkVBox`是一個垂直盒式容器。它將其子窗口小部件放置在單個列中。 `GtkHBox`是一個非常相似的容器；它將其子窗口小部件放在一行中。 `vbox.c` ```c #include <gtk/gtk.h> int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *vbox; GtkWidget *settings; GtkWidget *accounts; GtkWidget *loans; GtkWidget *cash; GtkWidget *debts; gtk_init(&argc, &argv); window = gtk_window_new(GTK_WINDOW_TOPLEVEL); gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER); gtk_window_set_default_size(GTK_WINDOW(window), 230, 250); gtk_window_set_title(GTK_WINDOW(window), "GtkVBox"); gtk_container_set_border_width(GTK_CONTAINER(window), 5); vbox = gtk_vbox_new(TRUE, 1); gtk_container_add(GTK_CONTAINER(window), vbox); settings = gtk_button_new_with_label("Settings"); accounts = gtk_button_new_with_label("Accounts"); loans = gtk_button_new_with_label("Loans"); cash = gtk_button_new_with_label("Cash"); debts = gtk_button_new_with_label("Debts"); gtk_box_pack_start(GTK_BOX(vbox), settings, TRUE, TRUE, 0); gtk_box_pack_start(GTK_BOX(vbox), accounts, TRUE, TRUE, 0); gtk_box_pack_start(GTK_BOX(vbox), loans, TRUE, TRUE, 0); gtk_box_pack_start(GTK_BOX(vbox), cash, TRUE, TRUE, 0); gtk_box_pack_start(GTK_BOX(vbox), debts, TRUE, TRUE, 0); g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), G_OBJECT(window)); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 本示例將五個按鈕打包到一欄中。如果我們調整應用窗口的大小，則子窗口小部件也將被調整大小。 ```c vbox = gtk_vbox_new(TRUE, 1); ``` `gtk_vbox_new()`函數創建一個`GtkVBox`容器。我們將`homogeneous`參數設置為`TRUE`。這意味著我們所有的按鈕都將具有相同的大小。小部件之間的間距設置為 1 像素。 ```c gtk_box_pack_start(GTK_BOX(vbox), settings, TRUE, TRUE, 0); ``` `gtk_box_pack_start()`函數將小部件添加到框中。前兩個參數是盒子容器和子窗口小部件。接下來的三個參數是`expand`，`fill`和`padding`。注意，如果`expand`參數設置為`FALSE`，則`fill`參數無效。同樣，如果我們創建的容器的均質參數設置為`TRUE`，則`expand`參數無效。在我們的情況下，當窗口放大且窗口小部件填充額外區域時，“設置”按鈕將獲得額外的空間。 ![GtkVBox container](https://img.kancloud.cn/45/be/45be55307de7af11df6b51ed7584cd72_232x276.jpg) 圖：`GtkVBox`容器 ## `GtkTable` `GtkTable`小部件按行和列排列小部件。 `table.c` ```c #include <gtk/gtk.h> int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *table; GtkWidget *button; gchar *values[16] = { "7", "8", "9", "/", "4", "5", "6", "*", "1", "2", "3", "-", "0", ".", "=", "+" }; gtk_init(&argc, &argv); window = gtk_window_new(GTK_WINDOW_TOPLEVEL); gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER); gtk_window_set_default_size(GTK_WINDOW(window), 250, 180); gtk_window_set_title(GTK_WINDOW(window), "GtkTable"); gtk_container_set_border_width(GTK_CONTAINER(window), 5); table = gtk_table_new(4, 4, TRUE); gtk_table_set_row_spacings(GTK_TABLE(table), 2); gtk_table_set_col_spacings(GTK_TABLE(table), 2); int i = 0; int j = 0; int pos = 0; for (i=0; i < 4; i++) { for (j=0; j < 4; j++) { button = gtk_button_new_with_label(values[pos]); gtk_table_attach_defaults(GTK_TABLE(table), button, j, j+1, i, i+1); pos++; } } gtk_container_add(GTK_CONTAINER(window), table); g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 在此示例中，我們創建了一組在計算器中看到的按鈕。 ```c table = gtk_table_new(4, 4, TRUE); ``` 我們創建一個具有 4 行 4 列的新`GtkTable`小部件。當我們將`TRUE`傳遞給第三個參數時，所有表單元格的大小都將調整為包含最大窗口小部件的單元格的大小。 ```c gtk_table_set_row_spacings(GTK_TABLE(table), 2); gtk_table_set_col_spacings(GTK_TABLE(table), 2); ``` 我們在行和列之間設置一些空間。 ```c for (i=0; i < 4; i++) { for (j=0; j < 4; j++) { button = gtk_button_new_with_label(values[pos]); gtk_table_attach_defaults(GTK_TABLE(table), button, j, j+1, i, i+1 ); pos++; } } ``` 這段代碼創建了 16 個按鈕，并將它們放入容器中。 `gtk_table_attach_defaults()`將子項添加到具有相同填充和擴展選項的表容器中。 ![GtkTable](https://img.kancloud.cn/de/ab/deabf276c0b29b21e51a2237b345bb25_252x206.jpg) 圖：`GtkTable` ## 角按鈕下一個示例在窗口的右下角放置兩個按鈕。 `cornerbuttons.c` ```c #include <gtk/gtk.h> int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *okBtn; GtkWidget *clsBtn; GtkWidget *vbox; GtkWidget *hbox; GtkWidget *halign; GtkWidget *valign; gtk_init(&argc, &argv); window = gtk_window_new(GTK_WINDOW_TOPLEVEL); gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER); gtk_window_set_default_size(GTK_WINDOW(window), 350, 200); gtk_window_set_title(GTK_WINDOW(window), "Corner buttons"); gtk_container_set_border_width(GTK_CONTAINER(window), 10); vbox = gtk_vbox_new(FALSE, 5); valign = gtk_alignment_new(0, 1, 0, 0); gtk_container_add(GTK_CONTAINER(vbox), valign); gtk_container_add(GTK_CONTAINER(window), vbox); hbox = gtk_hbox_new(TRUE, 3); okBtn = gtk_button_new_with_label("OK"); gtk_widget_set_size_request(okBtn, 70, 30); gtk_container_add(GTK_CONTAINER(hbox), okBtn); clsBtn = gtk_button_new_with_label("Close"); gtk_container_add(GTK_CONTAINER(hbox), clsBtn); halign = gtk_alignment_new(1, 0, 0, 0); gtk_container_add(GTK_CONTAINER(halign), hbox); gtk_box_pack_start(GTK_BOX(vbox), halign, FALSE, FALSE, 0); g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), G_OBJECT(window)); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 在示例中，我們使用一個水平框，一個垂直框和兩個對齊容器。 ```c valign = gtk_alignment_new(0, 1, 0, 0); ``` 此對齊容器將其子窗口小部件放在底部。 ```c gtk_container_add(GTK_CONTAINER(vbox), valign); ``` 在這里，我們將對齊小部件放置在垂直框中。 ```c hbox = gtk_hbox_new(TRUE, 3); okBtn = gtk_button_new_with_label("OK"); gtk_widget_set_size_request(okBtn, 70, 30); gtk_container_add(GTK_CONTAINER(hbox), okBtn); clsBtn = gtk_button_new_with_label("Close"); gtk_container_add(GTK_CONTAINER(hbox), clsBtn); ``` 我們創建一個水平框，并在其中放置兩個按鈕。 `gtk_widget_set_size_request()`設置小部件的最小大小。由于我們已經將`GtkHBox`的`homogeneous`參數設置為`TRUE`，因此另一個按鈕也被調整為新的大小。 ```c halign = gtk_alignment_new(1, 0, 0, 0); gtk_container_add(GTK_CONTAINER(halign), hbox); gtk_box_pack_start(GTK_BOX(vbox), halign, FALSE, FALSE, 0); ``` 這將創建一個對齊容器，將其子窗口小部件放在右側。我們將水平框添加到對齊容器中，然后將對齊容器包裝到垂直框中。對齊容器只能使用一個子窗口小部件；因此，我們還必須使用盒子。 ![Corner buttons](https://img.kancloud.cn/ba/53/ba53afd2ef0b27edf988e6c3131740ae_352x226.jpg) 圖：角按鈕 ## 窗口接下來，我們將創建一個更高級的示例。我們顯示一個可以在 JDeveloper 中找到的窗口。 ![Windows dialog in JDeveloper](https://img.kancloud.cn/6b/eb/6bebb9e9912b375d03b084691ebcdeb8_267x260.jpg) 圖：窗口 dialog in JDeveloper 該對話框顯示所有打開的窗口，或更確切地說是 JDeveloper 應用中的選項卡。 `windows.c` ```c #include <gtk/gtk.h> int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *table; GtkWidget *title; GtkWidget *wins; GtkWidget *halign; GtkWidget *halign2; GtkWidget *valign; GtkWidget *actBtn; GtkWidget *clsBtn; GtkWidget *hlpBtn; GtkWidget *okBtn; gtk_init(&argc, &argv); window = gtk_window_new(GTK_WINDOW_TOPLEVEL); gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER); gtk_widget_set_size_request (window, 300, 250); gtk_window_set_title(GTK_WINDOW(window), "Windows"); gtk_container_set_border_width(GTK_CONTAINER(window), 15); table = gtk_table_new(6, 4, FALSE); gtk_table_set_col_spacings(GTK_TABLE(table), 3); gtk_table_set_row_spacing(GTK_TABLE(table), 0, 3); title = gtk_label_new("Windows"); halign = gtk_alignment_new(0, 0, 0, 0); gtk_container_add(GTK_CONTAINER(halign), title); gtk_table_attach(GTK_TABLE(table), halign, 0, 1, 0, 1, GTK_FILL, GTK_FILL, 0, 0); wins = gtk_text_view_new(); gtk_text_view_set_editable(GTK_TEXT_VIEW(wins), FALSE); gtk_text_view_set_cursor_visible(GTK_TEXT_VIEW(wins), FALSE); gtk_table_attach(GTK_TABLE(table), wins, 0, 2, 1, 3, GTK_FILL | GTK_EXPAND, GTK_FILL | GTK_EXPAND, 1, 1); actBtn = gtk_button_new_with_label("Activate"); gtk_widget_set_size_request(actBtn, 50, 30); gtk_table_attach(GTK_TABLE(table), actBtn, 3, 4, 1, 2, GTK_FILL, GTK_SHRINK, 1, 1); valign = gtk_alignment_new(0, 0, 0, 0); clsBtn = gtk_button_new_with_label("Close"); gtk_widget_set_size_request(clsBtn, 70, 30); gtk_container_add(GTK_CONTAINER(valign), clsBtn); gtk_table_set_row_spacing(GTK_TABLE(table), 1, 3); gtk_table_attach(GTK_TABLE(table), valign, 3, 4, 2, 3, GTK_FILL, GTK_FILL | GTK_EXPAND, 1, 1); halign2 = gtk_alignment_new(0, 1, 0, 0); hlpBtn = gtk_button_new_with_label("Help"); gtk_container_add(GTK_CONTAINER(halign2), hlpBtn); gtk_widget_set_size_request(hlpBtn, 70, 30); gtk_table_set_row_spacing(GTK_TABLE(table), 3, 5); gtk_table_attach(GTK_TABLE(table), halign2, 0, 1, 4, 5, GTK_FILL, GTK_FILL, 0, 0); okBtn = gtk_button_new_with_label("OK"); gtk_widget_set_size_request(okBtn, 70, 30); gtk_table_attach(GTK_TABLE(table), okBtn, 3, 4, 4, 5, GTK_FILL, GTK_FILL, 0, 0); gtk_container_add(GTK_CONTAINER(window), table); g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), G_OBJECT(window)); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 該示例使用一個表容器和三個對齊容器。 ```c table = gtk_table_new(6, 4, FALSE); ``` 創建一個`GtkTable`容器。它有六行四列。 ```c gtk_table_set_col_spacings(GTK_TABLE(table), 3); ``` `gtk_table_set_col_spacings()`將表中每列之間的間隔設置為 3。 ```c gtk_table_set_row_spacing(GTK_TABLE(table), 0, 3); ``` `gtk_table_row_spacing()`設置第一行和第二行之間的空間。 ```c title = gtk_label_new("Windows"); halign = gtk_alignment_new(0, 0, 0, 0); gtk_container_add(GTK_CONTAINER(halign), title); gtk_table_attach(GTK_TABLE(table), halign, 0, 1, 0, 1, GTK_FILL, GTK_FILL, 0, 0); ``` 這段代碼創建了一個左對齊的標簽。標簽放置在`GtkTable`容器的第一行和第一列中。 ```c wins = gtk_text_view_new(); gtk_text_view_set_editable(GTK_TEXT_VIEW(wins), FALSE); gtk_text_view_set_cursor_visible(GTK_TEXT_VIEW(wins), FALSE); gtk_table_attach(GTK_TABLE(table), wins, 0, 2, 1, 3, GTK_FILL | GTK_EXPAND, GTK_FILL | GTK_EXPAND, 1, 1); ``` `GtkText`小部件跨越兩行兩列。我們使用`gtk_text_view_set_editable()`方法使窗口小部件不可編輯，并使用`gtk_text_view_set_cursor_visible()`方法隱藏其光標。 ```c valign = gtk_alignment_new(0, 0, 0, 0); clsBtn = gtk_button_new_with_label("Close"); gtk_widget_set_size_request(clsBtn, 70, 30); gtk_container_add(GTK_CONTAINER(valign), clsBtn); gtk_table_set_row_spacing(GTK_TABLE(table), 1, 3); gtk_table_attach(GTK_TABLE(table), valign, 3, 4, 2, 3, GTK_FILL, GTK_FILL | GTK_EXPAND, 1, 1); ``` 我們將“關閉”按鈕放在文本視圖窗口小部件旁邊的第四列中。我們將按鈕添加到對齊小部件中，以便我們可以將其對齊到頂部。 ```c halign2 = gtk_alignment_new(0, 1, 0, 0); hlpBtn = gtk_button_new_with_label("Help"); gtk_container_add(GTK_CONTAINER(halign2), hlpBtn); gtk_widget_set_size_request(hlpBtn, 70, 30); gtk_table_set_row_spacing(GTK_TABLE(table), 3, 5); gtk_table_attach(GTK_TABLE(table), halign2, 0, 1, 4, 5, GTK_FILL, GTK_FILL, 0, 0); ``` “幫助”按鈕向左對齊。它位于文本小部件下方。我們在文本小部件和按鈕之間放置一些空間。 ```c okBtn = gtk_button_new_with_label("OK"); gtk_widget_set_size_request(okBtn, 70, 30); gtk_table_attach(GTK_TABLE(table), okBtn, 3, 4, 4, 5, GTK_FILL, GTK_FILL, 0, 0); ``` “確定”按鈕轉到“激活”和“關閉”按鈕下面的第二列。 ![Windows](https://img.kancloud.cn/63/1e/631ec02ffa436ef41581c7ac8428147c_302x276.jpg) 圖：窗口本章專門介紹布局管理。