GtkTreeView 與 GtkListStore

GTK Gossip: GtkTreeView 與 GtkListStore

在看這篇之前，請先看過 GtkComboBox 以及 GtkComboBox 與 GtkListStore，由於以Model-View的方式設計，您可以在不修改Model的情況下，為Model換上另一個顯示的外觀（View），例如為 GtkComboBox 與 GtkListStore 範例中建立的GtkListStore換上GtkTreeView的外觀。

具體來說，也就是該範例中的createModel()內容無需改變，將GtkComboBox的相對應程式碼，換成建立GtkTreeView的程式碼，例如：

GtkWidget *treeView = gtk_tree_view_new_with_model(createModel());
GtkCellRenderer *renderer = gtk_cell_renderer_pixbuf_new();
GtkTreeViewColumn *column = gtk_tree_view_column_new_with_attributes(
                   "Icon", renderer,
                 "pixbuf", PIXBUF_COL,
                    NULL);
gtk_tree_view_append_column(GTK_TREE_VIEW (treeView), column);

renderer = gtk_cell_renderer_text_new();
column = gtk_tree_view_column_new_with_attributes(
                 "Filename", renderer,
                 "text", TEXT_COL,
                  NULL);
gtk_tree_view_append_column(GTK_TREE_VIEW (treeView), column);

GtkTreeViewColumn是GtkTreeView中的列代表，可用以設定該列的內容如何繪製以及一些相關屬性，基本上以上程式片段中，gtk_tree_view_column_new_with_attributes()與 gtk_tree_view_append_column()函式可以用 gtk_tree_view_insert_column_with_attributes()函式來簡化，也就是可以簡化為：

GtkWidget *treeView = gtk_tree_view_new_with_model(createModel());
GtkCellRenderer *renderer = gtk_cell_renderer_pixbuf_new();
gtk_tree_view_insert_column_with_attributes(
        GTK_TREE_VIEW(treeView), -1, "Icon", renderer,
        "pixbuf", PIXBUF_COL,
        NULL);

renderer = gtk_cell_renderer_text_new();
gtk_tree_view_insert_column_with_attributes(
        GTK_TREE_VIEW(treeView), -1, "Filename", renderer,
        "text", TEXT_COL,
        NULL);

在GtkTreeView當中的選擇，是以為個GtkTreeSelection物件作代表，當選擇改變時，會發出"changed"的Signal，所以要連結Signal與Callback函式，可以如下進行：

GtkTreeSelection *selection = gtk_tree_view_get_selection(GTK_TREE_VIEW(treeView));
g_signal_connect(G_OBJECT(selection), "changed",
G_CALLBACK(selection_changed), label);

至於Callback函式的部份大同小異，您要從傳遞的GtkTreeSelection中取得GtkTreeView，從GtkTreeView中取得 GtkTreeModel，再使用gtk_tree_selection_get_selected()將GtkTreeIter指向選中的列，以取得您想取得的欄位資料：

gboolean selection_changed(GtkTreeSelection *selection, GtkLabel *label) {
    GtkTreeView *treeView;
    GtkTreeModel *model;
    GtkTreeIter iter;
    gchar *active;

    treeView = gtk_tree_selection_get_tree_view(selection);
    model = gtk_tree_view_get_model(treeView);
    gtk_tree_selection_get_selected(selection, &model, &iter);
    gtk_tree_model_get(model, &iter,
                       1, &active,
                       -1);

    gtk_label_set_text(label, active);
}

下面的範例是以上說明的綜合示範：

gtk_tree_view_demo.c

#include <gtk/gtk.h>

enum {
    PIXBUF_COL,
    TEXT_COL
};

GtkTreeModel* createModel() {
    const gchar *files[] = {"caterpillar.jpg", "momor.jpg",
                            "hamimi.jpg", "bush.jpg"};
    GdkPixbuf *pixbuf;
    GtkTreeIter iter;
    GtkListStore *store;
    gint i;

    store = gtk_list_store_new(2, GDK_TYPE_PIXBUF, G_TYPE_STRING);

    for(i = 0; i < 4; i++) {
        pixbuf = gdk_pixbuf_new_from_file(files[i], NULL);
        gtk_list_store_append(store, &iter);
        gtk_list_store_set(store, &iter,
                           PIXBUF_COL, pixbuf,
                           TEXT_COL, files[i],
		           -1);       
        gdk_pixbuf_unref(pixbuf);
    }

    return GTK_TREE_MODEL(store);
}

gboolean selection_changed(GtkTreeSelection *selection, GtkLabel *label) {
    GtkTreeView *treeView;
    GtkTreeModel *model;
    GtkTreeIter iter;
    gchar *active;
    
    treeView = gtk_tree_selection_get_tree_view(selection);
    model = gtk_tree_view_get_model(treeView);
    gtk_tree_selection_get_selected(selection, &model, &iter);
    gtk_tree_model_get(model, &iter,
                       1, &active,
                       -1);

    gtk_label_set_text(label, active);
}

int main(int argc, char *argv[]) {
    GtkWidget *window;
    GtkWidget *treeView;
    GtkCellRenderer *renderer;
    GtkTreeViewColumn *column;
    GtkWidget *label;
    GtkWidget *vbox;
    GtkTreeSelection *selection;

    gtk_init(&argc, &argv);

    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window), "GtkTreeView");
    gtk_window_set_default_size(GTK_WINDOW(window), 200, 50);

    treeView = gtk_tree_view_new_with_model(createModel());

    renderer = gtk_cell_renderer_pixbuf_new();
    column = gtk_tree_view_column_new_with_attributes(
                     "Icon", renderer, 
                     "pixbuf", PIXBUF_COL,
                      NULL);
    gtk_tree_view_append_column(GTK_TREE_VIEW (treeView), column);

    renderer = gtk_cell_renderer_text_new();
    column = gtk_tree_view_column_new_with_attributes(
                     "Filename", renderer,
                     "text", TEXT_COL,
                      NULL);
    gtk_tree_view_append_column(GTK_TREE_VIEW (treeView), column);

    label = gtk_label_new("caterpillar.jpg");
    vbox = gtk_vbox_new(FALSE, 5);

    gtk_box_pack_start(GTK_BOX(vbox), treeView, TRUE, TRUE, 5);
    gtk_box_pack_start(GTK_BOX(vbox), label, TRUE, TRUE, 5);
    gtk_container_add(GTK_CONTAINER(window), vbox);

    selection = gtk_tree_view_get_selection(GTK_TREE_VIEW(treeView));
    g_signal_connect(G_OBJECT(selection), "changed",
                     G_CALLBACK(selection_changed), label);

    g_signal_connect(GTK_OBJECT(window), "destroy",
                     G_CALLBACK(gtk_main_quit), NULL);

    gtk_widget_show_all(window);

    gtk_main();

    return 0;
}

一個執行的結果畫面如下所示：

From Gossip@caterpillar

GTK Gossip: GtkTreeView 與 GtkListStore