GTK 程式設計基礎：自定義圖文按鈕與信號機制

GTK 按鈕不僅能顯示文字，還可組合圖片與標籤。本文示範如何用 GtkHBox 封裝圖像+文字為自定義按鈕內容，並解析按鈕的五大核心信號。

自定義圖文按鈕實現

核心思路

1. 創建 GtkHBox 容器。
2. 加入 GtkImage (從檔案載入) 與 GtkLabel。
3. 用 gtk_box_pack_start() 排版。
4. 將 Box 作為子元件加入 GtkButton (gtk_container_add())。

完整代碼 (button_demo.c)

#include 
#include 

GtkWidget* create_image_label_box(const gchar *image_file, const gchar *label_text) {
    GtkWidget *box = gtk_hbox_new(FALSE, 0);
    gtk_container_set_border_width(GTK_CONTAINER(box), 2);

    GtkWidget *image = gtk_image_new_from_file(image_file);
    GtkWidget *label = gtk_label_new(label_text);

    gtk_box_pack_start(GTK_BOX(box), image, FALSE, FALSE, 3);
    gtk_box_pack_start(GTK_BOX(box), label, FALSE, FALSE, 3);

    gtk_widget_show(image);
    gtk_widget_show(label);
    return box;
}

void button_clicked_cb(GtkWidget *widget, gpointer data) {
    g_print("Button \"%s\" clicked\n", (gchar*)data);
}

gint delete_event_cb(GtkWidget *widget, GdkEvent *event, gpointer data) {
    gtk_main_quit();
    return FALSE;
}

int main(int argc, char *argv[]) {
    GtkWidget *window, *button, *box;

    gtk_init(&argc, &argv);

    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    g_signal_connect(window, "delete-event", G_CALLBACK(delete_event_cb), NULL);
    gtk_container_set_border_width(GTK_CONTAINER(window), 80);
    gtk_window_set_title(GTK_WINDOW(window), "圖文按鈕示例");

    button = gtk_button_new();
    g_signal_connect(button, "clicked", G_CALLBACK(button_clicked_cb), (gpointer)"Cool Button");

    box = create_image_label_box("info.xpm", "Cool Button");
    gtk_widget_show(box);
    gtk_container_add(GTK_CONTAINER(button), box);
    gtk_widget_show(button);

    gtk_container_add(GTK_CONTAINER(window), button);
    gtk_widget_show(window);

    gtk_main();
    return 0;
}

按鈕五大核心信號

切換按鈕 (GtkToggleButton) 預告

繼承自 GtkButton，具備「按下/彈起」兩態，信號 toggled 狀態改變時觸發，配合 gtk_toggle_button_get_active() 獲取狀態。下篇將詳細講解。

編譯與運行

gcc button_demo.c -o btn_demo `pkg-config --cflags --libs gtk+-2.0`
# 需同目錄下有 info.xpm 圖片檔案
./btn_demo

視窗中央顯示帶圖標文字的按鈕，點擊終端輸出 Button "Cool Button" clicked。