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; } 一個執行的結果畫面如下所示：

BloggerAds 廣告 換燈度聖誕 節能又減碳 點亮2011節能新希望，省錢密技大公開，立即加入全民節能運動 更多訊息.. 羅技找出你筆電的好麻吉！ 搭配出最COOL的筆電體驗，並與你的好友們分享，就有機會獲得豐富大獎喔！ 更多訊息.. Impr