# GTK+ 小部件 > 原文： [http://zetcode.com/gui/gtk2/gtkwidgets/](http://zetcode.com/gui/gtk2/gtkwidgets/) 在 GTK+ 編程教程的這一部分中，我們將介紹一些 GTK+ 小部件。 小部件是 GUI 應用的基本構建塊。 多年來，一些小部件已成為編程工具包的標準。 例如按鈕，復選框或滾動條。 GTK+ 工具箱的理念是將小部件的數量保持在最低水平。 將創建更多專門的小部件作為定制 GTK+ 小部件。 ## `GtkButton` `GtkButton`是用于觸發動作的簡單小部件。 `button.c` ```c #include <gtk/gtk.h> int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *halign; GtkWidget *btn; gtk_init(&argc, &argv); window = gtk_window_new(GTK_WINDOW_TOPLEVEL); gtk_window_set_title(GTK_WINDOW(window), "GtkButton"); gtk_window_set_default_size(GTK_WINDOW(window), 230, 150); gtk_container_set_border_width(GTK_CONTAINER(window), 15); gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER); halign = gtk_alignment_new(0, 0, 0, 0); gtk_container_add(GTK_CONTAINER(window), halign); btn = gtk_button_new_with_label("Quit"); gtk_widget_set_size_request(btn, 70, 30); gtk_container_add(GTK_CONTAINER(halign), btn); g_signal_connect(G_OBJECT(btn), "clicked", G_CALLBACK(gtk_main_quit), G_OBJECT(window)); g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 該示例顯示了一個位于窗口左上角的按鈕。 當我們單擊按鈕時，應用退出。 ```c btn = gtk_button_new_with_label("Quit"); ``` `gtk_button_new_with_label()`創建一個帶有標簽的新`GtkButton`。 ```c g_signal_connect(G_OBJECT(btn), "clicked", G_CALLBACK(gtk_main_quit), G_OBJECT(window)); ``` 按鈕的`clicked`信號連接到`gtk_main_quit()`函數，該功能終止應用。  圖：`GtkButton` ## `GtkCheckButton` `GtkCheckButton`是具有兩種狀態的窗口小部件：打開和關閉。 接通狀態通過復選標記顯示。 `checkbutton.c` ```c #include <gtk/gtk.h> void toggle_title(GtkWidget *widget, gpointer window) { if (gtk_toggle_button_get_active(GTK_TOGGLE_BUTTON(widget))) { gtk_window_set_title(window, "GtkCheckButton"); } else { gtk_window_set_title(window, ""); } } int main(int argc, char** argv) { GtkWidget *window; GtkWidget *halign; GtkWidget *cb; gtk_init(&argc, &argv); window = gtk_window_new(GTK_WINDOW_TOPLEVEL); 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), 230, 150); gtk_window_set_title(GTK_WINDOW(window), "GtkCheckButton"); halign = gtk_alignment_new(0, 0, 0, 0); gtk_container_add(GTK_CONTAINER(window), halign); cb = gtk_check_button_new_with_label("Show title"); gtk_toggle_button_set_active(GTK_TOGGLE_BUTTON(cb), TRUE); GTK_WIDGET_UNSET_FLAGS(cb, GTK_CAN_FOCUS); gtk_container_add(GTK_CONTAINER(halign), cb); g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL); g_signal_connect(cb, "clicked", G_CALLBACK(toggle_title), (gpointer) window); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 該示例根據`GtkCheckButton`的狀態顯示窗口標題。 ```c cb = gtk_check_button_new_with_label("Show title"); gtk_toggle_button_set_active(GTK_TOGGLE_BUTTON(cb), TRUE); ``` `GtkCheckButton`已創建并默認標記。 標題最初顯示。 ```c GTK_WIDGET_UNSET_FLAGS(cb, GTK_CAN_FOCUS); ``` 此代碼行禁用焦點。 ```c if (gtk_toggle_button_get_active(GTK_TOGGLE_BUTTON(widget))) { gtk_window_set_title(window, "GtkCheckButton"); } else { gtk_window_set_title(window, ""); } ``` 我們根據`GtkCheckButton`的狀態顯示窗口的標題。 要設置窗口的標題，我們使用`gtk_window_set_title()`。  圖：`GtkCheckButton` ## `GtkFrame` `GtkFrame`是一個帶有裝飾框和可選標簽的垃圾桶。 `frames.c` ```c #include <gtk/gtk.h> int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *table; GtkWidget *frame1; GtkWidget *frame2; GtkWidget *frame3; GtkWidget *frame4; 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, 250); gtk_window_set_title(GTK_WINDOW(window), "GtkFrame"); gtk_container_set_border_width(GTK_CONTAINER(window), 10); table = gtk_table_new(2, 2, TRUE); gtk_table_set_row_spacings(GTK_TABLE(table), 10); gtk_table_set_col_spacings(GTK_TABLE(table), 10); gtk_container_add(GTK_CONTAINER(window), table); frame1 = gtk_frame_new("Shadow In"); gtk_frame_set_shadow_type(GTK_FRAME(frame1), GTK_SHADOW_IN); frame2 = gtk_frame_new("Shadow Out"); gtk_frame_set_shadow_type(GTK_FRAME(frame2), GTK_SHADOW_OUT); frame3 = gtk_frame_new("Shadow Etched In"); gtk_frame_set_shadow_type(GTK_FRAME(frame3), GTK_SHADOW_ETCHED_IN); frame4 = gtk_frame_new("Shadow Etched Out"); gtk_frame_set_shadow_type(GTK_FRAME(frame4), GTK_SHADOW_ETCHED_OUT); gtk_table_attach_defaults(GTK_TABLE(table), frame1, 0, 1, 0, 1); gtk_table_attach_defaults(GTK_TABLE(table), frame2, 0, 1, 1, 2); gtk_table_attach_defaults(GTK_TABLE(table), frame3, 1, 2, 0, 1); gtk_table_attach_defaults(GTK_TABLE(table), frame4, 1, 2, 1, 2); 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 frame1 = gtk_frame_new("Shadow In"); ``` `gtk_frame_new()`函數創建帶有可選標簽的`GtkFrame`。 ```c gtk_frame_set_shadow_type(GTK_FRAME(frame1), GTK_SHADOW_IN); ``` `gtk_frame_set_shadow_type()`函數設置幀的陰影類型。  圖：`GtkFrame` ## `GtkHScale` `GtkHScale`是用于從一系列值中選擇一個值的水平滑塊控件。 `hscale.c` ```c void value_changed(GtkRange *range, gpointer win) { gdouble val = gtk_range_get_value(range); gchar *str = g_strdup_printf("%.f", val); gtk_label_set_text(GTK_LABEL(win), str); g_free(str); } int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *halign; GtkWidget *hbox; GtkWidget *hscale; GtkWidget *label; 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, 250); gtk_container_set_border_width(GTK_CONTAINER(window), 10); gtk_window_set_title(GTK_WINDOW(window), "GtkHScale"); hbox = gtk_hbox_new(FALSE, 20); hscale = gtk_hscale_new_with_range(0, 100, 1); gtk_scale_set_draw_value(GTK_SCALE(hscale), FALSE); gtk_widget_set_size_request(hscale, 150, -1); label = gtk_label_new("..."); gtk_misc_set_alignment(GTK_MISC(label), 0.0, 1); gtk_box_pack_start(GTK_BOX(hbox), hscale, FALSE, FALSE, 0); gtk_box_pack_start(GTK_BOX(hbox), label, FALSE, FALSE, 0); halign = gtk_alignment_new(0, 0, 0, 0); gtk_container_add(GTK_CONTAINER(halign), hbox); gtk_container_add(GTK_CONTAINER(window), halign); g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL); g_signal_connect(hscale, "value-changed", G_CALLBACK(value_changed), label); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 在示例中，我們有一個水平比例小部件和一個標簽小部件。 當前選擇的值顯示在標簽中。 ```c gdouble val = gtk_range_get_value(range); ``` `gtk_range_get_value()`函數從比例小部件中檢索當前選擇的值。 ```c gchar *str = g_strdup_printf("%.f", val); gtk_label_set_text(GTK_LABEL(win), str); ``` 我們使用`g_strdup_printf()`函數構建一個字符串值，并使用`gtk_label_set_text()`函數將其設置為標簽。 ```c hscale = gtk_hscale_new_with_range(0, 100, 1); ``` `gtk_hscale_new_with_range()`函數創建一個具有給定范圍的新水平比例小部件。 第一個參數是最小值，第二個參數是最大值，最后一個參數是步驟。 ```c gtk_scale_set_draw_value(GTK_SCALE(hscale), FALSE); ``` `gtk_scale_set_draw_value()`指定當前值是否在字符串旁邊顯示為字符串。 我們關閉該值。 相反，我們以編程方式將其設置為標簽小部件。  圖：`GtkHScale` ## GtkLabel `GtkLabel`小部件顯示文本。 `label.c` ```c #include <gtk/gtk.h> int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *label; 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), "No sleep"); gtk_container_set_border_width(GTK_CONTAINER(window), 15); label = gtk_label_new("I've always been too lame\n\ To see what's before me\n\ And I know nothing sweeter than\n\ Champaign from last New Years\n\ Sweet music in my ears\n\ And a night full of no fears\n\ \n\ But if I had one wish fulfilled tonight\n\ I'd ask for the sun to never rise\n\ If God passed a mic to me to speak\n\ I'd say \"Stay in bed, world,\n\ Sleep in peace"); gtk_label_set_justify(GTK_LABEL(label), GTK_JUSTIFY_CENTER); gtk_container_add(GTK_CONTAINER(window), label); g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 該示例顯示了歌曲的兩節經文。 ```c label = gtk_label_new("I've always been too lame\n\ To see what's before me\n\ ... ``` 我們創建一個`GtkLabel`小部件。 我們可以使用換行符來創建多行文本標簽。 注意轉義符。 我們使用了相當長的字符串，并且我們不想將所有文本都放在一行中。 在這種情況下，我們可以使用轉義符。 ```c gtk_label_set_justify(GTK_LABEL(label), GTK_JUSTIFY_CENTER); ``` `gtk_label_set_justify()`函數使標簽中的文本對齊。 使用`GTK_JUSTIFY_CENTER`類型時，文本居中。  圖：`GtkLabel` ## `GtkLabel` `GtkLabel`也可以顯示標記語言。 標記是 Pango 文本標記語言。 `markup.c` ```c #include <gtk/gtk.h> int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *label; 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, 100); gtk_window_set_title(GTK_WINDOW(window), "Markup label"); gchar *str = "<b>ZetCode</b>, knowledge only matters"; label = gtk_label_new(NULL); gtk_label_set_markup(GTK_LABEL(label), str); gtk_container_add(GTK_CONTAINER(window), label); gtk_widget_show(label); g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL); gtk_widget_show(window); gtk_main(); return 0; } ``` 該示例以粗體顯示了一部分文本。 ```c gchar *str = "<b>ZetCode</b>, knowledge only matters"; ``` 這是顯示的字符串。 它包含一個簡單的標記。 ```c label = gtk_label_new(NULL); ``` 我們創建一個空標簽。 ```c gtk_label_set_markup(GTK_LABEL(label), str); ``` `gtk_label_set_markup()`解析標記的字符串，并將其屬性應用于標簽。  圖：標記標簽 在 GTK+ 教程的這一部分中，我們介紹了 GTK+ 小部件。