GtkTreeView
<script>function StorePage(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));keyit.focus();}</script>
在看這篇之前，請先看過
GtkComboBox 與 GtkListStore
，由於以Model-View的方式設計，您可以在不修改Model的情況下，為Model換上另一個顯示的外觀（View），例如為
GtkComboBox 與 GtkListStore
範例中建立的GtkListStore換上GtkTreeView的外觀。
具體來說，也就是該範例中的createModel()內容無需改變，將GtkComboBox的相對應程式碼，換成建立GtkTreeView的程式碼，例如：
在GtkTreeView當中的選擇，是以為個GtkTreeSelection物件作代表，當選擇改變時，會發出"changed"的Signal，所以要連結Signal與Callback函式，可以如下進行：
至於Callback函式的部份大同小異，您要從傳遞的GtkTreeSelection中取得GtkTreeView，從GtkTreeView中取得 GtkTreeModel，再使用gtk_tree_selection_get_selected()將GtkTreeIter指向選中的列，以取得您 想取得的欄位資料：
下面的範例是以上說明的綜合示範：
一個執行的結果如下所示：
具體來說，也就是該範例中的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()函式來簡化，也就是可以簡化為：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);
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);
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);
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);
}
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;
}
一個執行的結果畫面如下所示：
有了以上的基礎，要在GtkTreeView搭配GtkTreeStore就沒什麼好解釋的了，下面這個範例，只是將範例中的createModel()函式，換成 GtkComboBox 與 GtkTreeStore 中的createModel()函式，剩下的都沒有改變，也就是為 GtkComboBox 與 GtkTreeStore 中的Model換上GtkTreeView的外觀顯示：
- gtk_tree_view_with_tree_store.c
#include <gtk/gtk.h>
enum {
PIXBUF_COL,
TEXT_COL
};
GtkTreeModel* createModel() {
const gchar *files[] = {"caterpillar.jpg", "momor.jpg",
"hamimi.jpg", "bush.jpg"};
gchar *stocks[] = {
GTK_STOCK_DIALOG_WARNING,
GTK_STOCK_STOP,
GTK_STOCK_NEW,
GTK_STOCK_CLEAR,
GTK_STOCK_OPEN
};
gchar *stockNames[] = {
"WARNING",
"STOP",
"NEW",
"GTK_STOCK_CLEAR",
"GTK_STOCK_OPEN"
};
GtkWidget *cellView;
GdkPixbuf *pixbuf;
GtkTreeIter iter1, iter2;
GtkTreeStore *store;
gint i, j, s;
store = gtk_tree_store_new(2, GDK_TYPE_PIXBUF, G_TYPE_STRING);
cellView = gtk_cell_view_new();
for(i = 0; i < 4; i++) {
pixbuf = gdk_pixbuf_new_from_file(files[i], NULL);
gtk_tree_store_append(store, &iter1, NULL);
gtk_tree_store_set(store, &iter1,
PIXBUF_COL, pixbuf,
TEXT_COL, files[i],
-1);
gdk_pixbuf_unref(pixbuf);
for(j = 0; j < 3; j++) {
s = rand() % 5;
pixbuf = gtk_widget_render_icon(cellView, stocks[s],
GTK_ICON_SIZE_BUTTON, NULL);
gtk_tree_store_append(store, &iter2, &iter1);
gtk_tree_store_set(store, &iter2,
PIXBUF_COL, pixbuf,
TEXT_COL, stockNames[s],
-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;
}
一個執行的結果如下所示：