GTK+ 小部件 II · ZetCode 中文系列教程

# GTK+ 小部件 II > 原文： [http://zetcode.com/gui/gtk2/gtkwidgetsII/](http://zetcode.com/gui/gtk2/gtkwidgetsII/) 在 GTK+ 編程教程的這一部分中，我們將繼續介紹各種 GTK+ 小部件。 ## `GktComboBoxText` `GktComboBoxText`是一個小部件，允許用戶從選項列表中進行選擇。選項是字符串。 `combobox.c` ```c #include <gtk/gtk.h> void combo_selected(GtkWidget *widget, gpointer window) { gchar *text = gtk_combo_box_get_active_text(GTK_COMBO_BOX(widget)); gtk_label_set_text(GTK_LABEL(window), text); g_free(text); } int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *hbox; GtkWidget *vbox; GtkWidget *combo; GtkWidget *label; gtk_init(&argc, &argv); window = gtk_window_new(GTK_WINDOW_TOPLEVEL); gtk_window_set_title(GTK_WINDOW(window), "GtkComboBox"); gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER); gtk_container_set_border_width(GTK_CONTAINER(window), 15); gtk_window_set_default_size(GTK_WINDOW(window), 300, 200); hbox = gtk_hbox_new(FALSE, 0); vbox = gtk_vbox_new(FALSE, 15); combo = gtk_combo_box_new_text(); gtk_combo_box_append_text(GTK_COMBO_BOX(combo), "Ubuntu"); gtk_combo_box_append_text(GTK_COMBO_BOX(combo), "Arch"); gtk_combo_box_append_text(GTK_COMBO_BOX(combo), "Fedora"); gtk_combo_box_append_text(GTK_COMBO_BOX(combo), "Mint"); gtk_combo_box_append_text(GTK_COMBO_BOX(combo), "Gentoo"); gtk_combo_box_append_text(GTK_COMBO_BOX(combo), "Debian"); gtk_box_pack_start(GTK_BOX(vbox), combo, FALSE, FALSE, 0); label = gtk_label_new("..."); gtk_box_pack_start(GTK_BOX(vbox), label, FALSE, FALSE, 0); gtk_box_pack_start(GTK_BOX(hbox), vbox, FALSE, FALSE, 0); gtk_container_add(GTK_CONTAINER(window), hbox); g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL); g_signal_connect(G_OBJECT(combo), "changed", G_CALLBACK(combo_selected), (gpointer) label); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 該示例顯示了一個組合框和一個標簽。組合框具有六個選項的列表。這些是 Linux 發行版的名稱。標簽窗口小部件顯示了從組合框中選擇的選項。 ```c combo = gtk_combo_box_text_new(); ``` `gtk_combo_box_text_new()`函數創建一個簡單的純文本組合框。 ```c gtk_combo_box_append_text(GTK_COMBO_BOX(combo), "Ubuntu"); ``` `gtk_combo_box_text_append_text()`函數將一個字符串附加到組合框中存儲的字符串列表中。 ```c label = gtk_label_new("-"); ``` 創建一個新的標簽小部件。 ```c gchar *text = gtk_combo_box_get_active_text(GTK_COMBO_BOX(widget)); gtk_label_set_text(GTK_LABEL(window), text); g_free(text); ``` 我們得到選定的文本，并為其設置標簽文本。 `gtk_combo_box_get_active_text()`函數在組合框中返回當前活動的字符串。我們使用`gtk_label_set_text()`函數將字符串設置為標簽。 ![GktComboBoxText](https://img.kancloud.cn/40/62/40627e4ecb908ac69f211152e0d13db4_302x226.jpg) 圖：`GktComboBoxText` ## `GtkHSeparator` `GtkHSeparator`是水平分隔符。這是一種裝飾小部件。還有一個姐妹`GtkVSeparator`小部件。 `separator.c` ```c #include <gtk/gtk.h> int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *label1; GtkWidget *label2; GtkWidget *hseparator; GtkWidget *vbox; 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_title(GTK_WINDOW(window), "GtkHSeparator"); gtk_window_set_resizable(GTK_WINDOW(window), FALSE); gtk_container_set_border_width(GTK_CONTAINER(window), 10); label1 = gtk_label_new("Zinc is a moderately reactive, blue gray metal \ that tarnishes in moist air and burns in air with a bright bluish-green flame,\ giving off fumes of zinc oxide. It reacts with acids, alkalis and other non-metals.\ If not completely pure, zinc reacts with dilute acids to release hydrogen."); gtk_label_set_line_wrap(GTK_LABEL(label1), TRUE); label2 = gtk_label_new("Copper is an essential trace nutrient to all high \ plants and animals. In animals, including humans, it is found primarily in \ the bloodstream, as a co-factor in various enzymes, and in copper-based pigments. \ However, in sufficient amounts, copper can be poisonous and even fatal to organisms."); gtk_label_set_line_wrap(GTK_LABEL(label2), TRUE); vbox = gtk_vbox_new(FALSE, 10); gtk_container_add(GTK_CONTAINER(window), vbox); hseparator = gtk_hseparator_new(); gtk_box_pack_start(GTK_BOX(vbox), label1, FALSE, TRUE, 0); gtk_box_pack_start(GTK_BOX(vbox), hseparator, FALSE, TRUE, 10); gtk_box_pack_start(GTK_BOX(vbox), label2, FALSE, TRUE, 0); g_signal_connect_swapped(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), G_OBJECT(window)); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 該代碼示例顯示了兩種化學元素的定義；它們由水平分隔符分隔。這使示例在視覺上更具吸引力。 ```c label1 = gtk_label_new("Zinc is a moderately reactive, blue gray metal \ that tarnishes in moist air and burns in air with a bright bluish-green flame,\ giving off fumes of zinc oxide. It reacts with acids, alkalis and other non-metals.\ If not completely pure, zinc reacts with dilute acids to release hydrogen."); ``` 我們創建第一個標簽，即鋅元素的定義。 ```c gtk_label_set_line_wrap(GTK_LABEL(label2), TRUE); ``` 如果文本超過小部件的大小，則`gtk_label_set_line_wrap()`函數將換行。 ```c hseparator = gtk_hseparator_new(); ``` `gtk_hseparator_new()`創建一個新的`GtkHSeparator`。 ```c gtk_box_pack_start(GTK_BOX(vbox), label1, FALSE, TRUE, 0); gtk_box_pack_start(GTK_BOX(vbox), hseparator, FALSE, TRUE, 10); gtk_box_pack_start(GTK_BOX(vbox), label2, FALSE, TRUE, 0); ``` 我們將分隔符放在標簽之間。 ![GtkHSeparator](https://img.kancloud.cn/8b/30/8b3041a6ee5ad1ab83b2b0c7ccbbb03f_358x275.jpg) 圖：`GtkHSeparator` ## `GtkEntry` `GtkEntry`是單行文本輸入字段。該小部件用于輸入文本數據。 `entry.c` ```c #include <gtk/gtk.h> int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *table; GtkWidget *label1; GtkWidget *label2; GtkWidget *label3; GtkWidget *entry1; GtkWidget *entry2; GtkWidget *entry3; 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_title(GTK_WINDOW(window), "GtkEntry"); gtk_container_set_border_width(GTK_CONTAINER(window), 10); table = gtk_table_new(3, 2, FALSE); gtk_container_add(GTK_CONTAINER(window), table); label1 = gtk_label_new("Name"); label2 = gtk_label_new("Age"); label3 = gtk_label_new("Occupation"); gtk_table_attach(GTK_TABLE(table), label1, 0, 1, 0, 1, GTK_FILL | GTK_SHRINK, GTK_FILL | GTK_SHRINK, 5, 5); gtk_table_attach(GTK_TABLE(table), label2, 0, 1, 1, 2, GTK_FILL | GTK_SHRINK, GTK_FILL | GTK_SHRINK, 5, 5); gtk_table_attach(GTK_TABLE(table), label3, 0, 1, 2, 3, GTK_FILL | GTK_SHRINK, GTK_FILL | GTK_SHRINK, 5, 5); entry1 = gtk_entry_new(); entry2 = gtk_entry_new(); entry3 = gtk_entry_new(); gtk_table_attach(GTK_TABLE(table), entry1, 1, 2, 0, 1, GTK_FILL | GTK_SHRINK, GTK_FILL | GTK_SHRINK, 5, 5); gtk_table_attach(GTK_TABLE(table), entry2, 1, 2, 1, 2, GTK_FILL | GTK_SHRINK, GTK_FILL | GTK_SHRINK, 5, 5); gtk_table_attach(GTK_TABLE(table), entry3, 1, 2, 2, 3, GTK_FILL | GTK_SHRINK, GTK_FILL | GTK_SHRINK, 5, 5); gtk_widget_show_all(window); g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL); gtk_main(); return 0; } ``` 在我們的示例中，我們顯示了三個文本條目和三個標簽。 ```c table = gtk_table_new(3, 2, FALSE); gtk_container_add(GTK_CONTAINER(window), table); ``` 為了組織小部件，我們使用表容器小部件。 ```c entry1 = gtk_entry_new(); ``` `gtk_entry_new()`函數創建一個新的`GtkEntry`。 ```c gtk_table_attach(GTK_TABLE(table), entry1, 1, 2, 0, 1, GTK_FILL | GTK_SHRINK, GTK_FILL | GTK_SHRINK, 5, 5); gtk_table_attach(GTK_TABLE(table), entry2, 1, 2, 1, 2, GTK_FILL | GTK_SHRINK, GTK_FILL | GTK_SHRINK, 5, 5); gtk_table_attach(GTK_TABLE(table), entry3, 1, 2, 2, 3, GTK_FILL | GTK_SHRINK, GTK_FILL | GTK_SHRINK, 5, 5); ``` 我們將這些小部件附加到表小部件。 ![GtkEntry](https://img.kancloud.cn/f9/4b/f94bb7c290b27ac2dde874202a0d1b87_270x157.jpg) 圖：`GtkEntry` ## `GtkImage` `GtkImage`是用于顯示圖像的小部件。 `image.c` ```c #include <gtk/gtk.h> int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *image; 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_title(GTK_WINDOW(window), "Red Rock"); image = gtk_image_new_from_file("redrock.jpg"); gtk_container_add(GTK_CONTAINER(window), image); g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 在我們的示例中，我們顯示了城堡的圖像。 ```c image = gtk_image_new_from_file("redrock.png"); ``` `gtk_image_new_from_file()`從指定的文件名創建一個新的`GtkImage`。如果找不到文件或無法加載文件，則顯示的`GtkImage`將顯示“圖像損壞”圖標。 ```c gtk_container_add(GTK_CONTAINER(window), image); ``` 圖像被添加到窗口容器中。 ## `GtkStatusbar` `GtkStatusbar`顯示狀態信息。它位于應用窗口的底部。 `statusbar.c` ```c #include <gtk/gtk.h> void button_pressed(GtkWidget *widget, gpointer window) { gchar *str; str = g_strdup_printf("%s button clicked", gtk_button_get_label(GTK_BUTTON(widget))); gtk_statusbar_push(GTK_STATUSBAR(window), gtk_statusbar_get_context_id(GTK_STATUSBAR(window), str), str); g_free(str); } int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *hbox; GtkWidget *vbox; GtkWidget *halign; GtkWidget *balign; GtkWidget *button1; GtkWidget *button2; GtkWidget *statusbar; 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), 300, 200); gtk_window_set_title(GTK_WINDOW(window), "GtkStatusbar"); vbox = gtk_vbox_new(FALSE, 0); hbox = gtk_hbox_new(FALSE, 0); gtk_container_add(GTK_CONTAINER(window), vbox); halign = gtk_alignment_new(0, 0, 0, 0); gtk_container_add(GTK_CONTAINER(halign), hbox); gtk_box_pack_start(GTK_BOX(vbox), halign, TRUE, TRUE, 5); button1 = gtk_button_new_with_label("OK"); gtk_widget_set_size_request(button1, 70, 30 ); button2 = gtk_button_new_with_label("Apply"); gtk_widget_set_size_request(button2, 70, 30 ); gtk_box_pack_start(GTK_BOX(hbox), button1, FALSE, FALSE, 5); gtk_box_pack_start(GTK_BOX(hbox), button2, FALSE, FALSE, 0); balign = gtk_alignment_new(0, 1, 1, 0); statusbar = gtk_statusbar_new(); gtk_container_add(GTK_CONTAINER(balign), statusbar); gtk_box_pack_start(GTK_BOX(vbox), balign, FALSE, FALSE, 0); g_signal_connect(G_OBJECT(button1), "clicked", G_CALLBACK(button_pressed), G_OBJECT(statusbar)); g_signal_connect(G_OBJECT(button2), "clicked", G_CALLBACK(button_pressed), G_OBJECT(statusbar)); g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 在代碼示例中，有兩個按鈕和一個狀態欄。如果單擊按鈕，狀態欄中將顯示一條消息。它說按下了哪個按鈕。 ```c gchar *str; str = g_strdup_printf("Button %s clicked", gtk_button_get_label(GTK_BUTTON(widget))); ``` 該消息是使用`g_strdup_printf()`函數構建的。我們使用`gtk_button_get_label()`函數獲得按鈕的標簽。 ```c gtk_statusbar_push(GTK_STATUSBAR(window), gtk_statusbar_get_context_id(GTK_STATUSBAR(window), str), str); ``` 我們在狀態欄中顯示該消息。 `gtk_statusbar_push()`函數將新消息推送到狀態欄的棧上。該函數需要一個上下文 ID，該上下文 ID 由`gtk_statusbar_get_context_id()`函數返回。 ```c statusbar = gtk_statusbar_new(); ``` `gtk_statusbar_new()`函數創建一個新的`GtkStatusbar`小部件。 ![GtkStatusbar](https://img.kancloud.cn/e6/52/e6523662ca19a0dfc9c3adb25c4c4a9e_302x226.jpg) 圖：`GtkStatusbar` ## `GtkIconView` `GtkIconView`是一個小部件，在網格中顯示圖標列表。它使用`GtkListStore`存儲其數據。 `iconview.c` ```c #include <gtk/gtk.h> #include <assert.h> enum { COL_DISPLAY_NAME, COL_PIXBUF, NUM_COLS }; GtkTreeModel *init_model(void) { GtkListStore *list_store; GdkPixbuf *p1, *p2, *p3, *p4; GtkTreeIter iter; GError *err = NULL; p1 = gdk_pixbuf_new_from_file("ubuntu.png", &err); p2 = gdk_pixbuf_new_from_file("gnumeric.png", &err); p3 = gdk_pixbuf_new_from_file("blender.png", &err); p4 = gdk_pixbuf_new_from_file("inkscape.png", &err); assert(err==NULL); list_store = gtk_list_store_new(NUM_COLS, G_TYPE_STRING, GDK_TYPE_PIXBUF); gtk_list_store_append(list_store, &iter); gtk_list_store_set(list_store, &iter, COL_DISPLAY_NAME, "Ubuntu", COL_PIXBUF, p1, -1); gtk_list_store_append(list_store, &iter); gtk_list_store_set(list_store, &iter, COL_DISPLAY_NAME, "Gnumeric", COL_PIXBUF, p2, -1); gtk_list_store_append(list_store, &iter); gtk_list_store_set(list_store, &iter, COL_DISPLAY_NAME, "Blender", COL_PIXBUF, p3, -1); gtk_list_store_append(list_store, &iter); gtk_list_store_set(list_store, &iter, COL_DISPLAY_NAME, "Inkscape", COL_PIXBUF, p4, -1); g_object_unref(p1); g_object_unref(p2); g_object_unref(p3); g_object_unref(p4); return GTK_TREE_MODEL(list_store); } int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *icon_view; GtkWidget *sw; gtk_init(&argc, &argv); window = gtk_window_new(GTK_WINDOW_TOPLEVEL); gtk_window_set_title(GTK_WINDOW(window), "IconView"); gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER); gtk_container_set_border_width(GTK_CONTAINER(window), 10); gtk_window_set_default_size(GTK_WINDOW(window), 350, 300); sw = gtk_scrolled_window_new(NULL, NULL); gtk_container_add(GTK_CONTAINER(window), sw); gtk_scrolled_window_set_policy(GTK_SCROLLED_WINDOW(sw), GTK_POLICY_AUTOMATIC, GTK_POLICY_AUTOMATIC); gtk_scrolled_window_set_shadow_type(GTK_SCROLLED_WINDOW(sw), GTK_SHADOW_IN); icon_view = gtk_icon_view_new_with_model(init_model()); gtk_container_add(GTK_CONTAINER(sw), icon_view); gtk_icon_view_set_text_column(GTK_ICON_VIEW(icon_view), COL_DISPLAY_NAME); gtk_icon_view_set_pixbuf_column(GTK_ICON_VIEW(icon_view), COL_PIXBUF); gtk_icon_view_set_selection_mode(GTK_ICON_VIEW(icon_view), GTK_SELECTION_MULTIPLE); g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 該示例顯示 4 個圖標。這些圖標代表四個著名的開源項目。 ```c p1 = gdk_pixbuf_new_from_file("ubuntu.png", &err); p2 = gdk_pixbuf_new_from_file("gnumeric.png", &err); p3 = gdk_pixbuf_new_from_file("blender.png", &err); p4 = gdk_pixbuf_new_from_file("inkscape.png", &err); ``` 我們使用`gdk_pixbuf_new_from_file()`函數從磁盤加載四個圖像。 ```c list_store = gtk_list_store_new(NUM_COLS, G_TYPE_STRING, GDK_TYPE_PIXBUF); ``` `gtk_list_store_new()`函數創建一個`GtkListStore`，它是`GtkTreeView`和`GtkIconView`小部件的列表模型。我們存儲文本和`pixbuf`數據。 ```c gtk_list_store_append(list_store, &iter); gtk_list_store_set(list_store, &iter, COL_DISPLAY_NAME, "ubuntu", COL_PIXBUF, p1, -1); ``` 此代碼將新行添加到模型中。 ```c icon_view = gtk_icon_view_new_with_model(init_model()); ``` `gtk_icon_view_new_with_model()`使用`GtkTreeModel`創建一個新的`GtkIconView`小部件。 ```c gtk_container_add(GTK_CONTAINER(sw), icon_view); ``` `GtkIconView`是一個容器小部件。我們將其添加到`GtkScrolledWindow`中。 ```c gtk_icon_view_set_text_column(GTK_ICON_VIEW(icon_view), COL_DISPLAY_NAME); ``` `gtk_icon_view_set_text_column()`函數設置哪一列是字符串列。 ```c gtk_icon_view_set_pixbuf_column(GTK_ICON_VIEW(icon_view), COL_PIXBUF); ``` `gtk_icon_view_set_pixbuf_column()`函數設置具有`pixbufs`的列。 ```c gtk_icon_view_set_selection_mode(GTK_ICON_VIEW(icon_view), GTK_SELECTION_MULTIPLE); ``` `gtk_icon_view_set_selection_mode()`設置`GtkIconView`的選擇模式。選擇`GTK_SELECTION_MULTIPLE`模式，可以選擇多個圖標。 ![IconView](https://img.kancloud.cn/69/2e/692e84e2afb9be992fc26f682c94c458_388x178.jpg) 圖：圖標 View 在 GTK+ 教程的這一部分中，我們將繼續介紹 GTK+ 小部件。