C語言GTK圖形介面開發實戰：盒子與網格佈局詳解

C語言GTK圖形介面開發實戰：佈局管理核心技術

GTK（GIMP Toolkit）是跨平台的圖形使用者介面開發函式庫，廣泛應用於Linux桌面應用程式開發。掌握GTK佈局管理是建構美觀、響應式介面的關鍵。本文深入解析盒子佈局與網格佈局兩大核心容器的使用技巧。

GTK函式呼叫慣例速查

GTK採用一致的物件導向C語言API設計模式，記住以下核心操作流程：

• 宣告控制項：GtkWidget *widget = gtk_widget_new()
• 設定屬性：gtk_widget_set_property(widget, "property", value) 或專用 setter 函式
• 加入容器：gtk_container_add(parent, child)
• 顯示控制項：gtk_widget_show(widget) 或 gtk_widget_show_all(window)
• 盒子佈局預設參數：gtk_box_pack_start() 後三個參數常用 FALSE, FALSE, 0

盒子佈局：線性排列的藝術

GtkBox 提供垂直（GTK_ORIENTATION_VERTICAL）與水平（GTK_ORIENTATION_HORIZONTAL）兩種單向線性佈局，適合工具列、表單欄位、按鈕群組等場景。

#include <gtk/gtk.h>

int main(int argc, char *argv[]) {
    gtk_init(&argc, &argv);

    GtkWidget *window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window), "盒子佈局範例");
    g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);

    GtkWidget *vbox = gtk_box_new(GTK_ORIENTATION_VERTICAL, 5);
    gtk_container_add(GTK_CONTAINER(window), vbox);

    GtkWidget *label = gtk_label_new("垂直盒子佈局示範");
    gtk_box_pack_start(GTK_BOX(vbox), label, FALSE, FALSE, 0);

    GtkWidget *entry = gtk_entry_new();
    gtk_box_pack_start(GTK_BOX(vbox), entry, FALSE, FALSE, 0);

    GtkWidget *button = gtk_button_new_with_label("確定按鈕");
    gtk_box_pack_start(GTK_BOX(vbox), button, FALSE, FALSE, 0);

    gtk_widget_show_all(window);
    gtk_main();
    return 0;
}

關鍵點：gtk_box_pack_start() 的 expand、fill、padding 參數控制子元件如何分配剩餘空間。

網格佈局：二維精準定位

GtkGrid 以表格方式管理子元件，支援跨行跨列合併，適合複雜表單、計算機面板、儀表板等介面。

#include <gtk/gtk.h>

int main(int argc, char *argv[]) {
    gtk_init(&argc, &argv);

    GtkWidget *window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window), "網格佈局範例");
    g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);

    GtkWidget *grid = gtk_grid_new();
    gtk_grid_set_row_spacing(GTK_GRID(grid), 5);
    gtk_grid_set_column_spacing(GTK_GRID(grid), 5);
    gtk_container_add(GTK_CONTAINER(window), grid);

    // gtk_grid_attach(grid, child, left, top, width, height)
    GtkWidget *btn1 = gtk_button_new_with_label("按鈕 1");
    gtk_grid_attach(GTK_GRID(grid), btn1, 0, 0, 1, 1);

    GtkWidget *btn2 = gtk_button_new_with_label("按鈕 2");
    gtk_grid_attach(GTK_GRID(grid), btn2, 1, 0, 1, 1);

    GtkWidget *btn3 = gtk_button_new_with_label("跨列按鈕");
    gtk_grid_attach(GTK_GRID(grid), btn3, 0, 1, 2, 1);  // 佔據兩列

    gtk_widget_show_all(window);
    gtk_main();
    return 0;
}

網格佈局核心參數解析：

• left：左邊欄位索引（從0開始）
• top：上邊列索引
• width：跨越欄位數
• height：跨越列數

實戰建議與最佳實踐

1. 容器巢狀組合：外層用 GtkBox 區分大區塊，內層用 GtkGrid 精細排版
2. 間距統一管理：使用 gtk_box_set_spacing()、gtk_grid_set_row_spacing() 保持視覺一致性
3. 響應式設計：善用 hexpand、vexpand 屬性適應視窗縮放
4. 記憶體管理：GTK 使用參考計數，g_object_unref() 釋放不再需要的物件

編譯執行指令

gcc main.c -o gtk_demo `pkg-config --cflags --libs gtk+-3.0`
./gtk_demo

持續探索 GTK 3/4 的豐富控制項（GtkStack、GtkRevealer、GtkFlowBox 等），配合 CSS 樣式美化，即可開發出專業級桌面應用程式。