GtkTreeView小部件 · ZetCode 中文系列教程

# `GtkTreeView`小部件 > 原文： [http://zetcode.com/gui/gtk2/gtktreeview/](http://zetcode.com/gui/gtk2/gtktreeview/) 在 GTK+ 編程教程的這一部分中，我們使用`GtkTreeView`小部件。 `GtkTreeView`小部件是一個復雜的小部件，可用于顯示列表和樹。小部件可以具有一列或多列。 `GtkTreeView`小部件具有 MVC（模型視圖控制器）設計架構。這意味著數據與視圖是分開的。 `GtkTreeView`小部件還可以使用其他幾個對象。 `GtkCellRenderer`確定如何在`GtkTreeViewColumn`中顯示數據。 `GtkListStore`和`GtkTreeStore`代表模型。它們處理在`GtkTreeView`小部件中顯示的數據。 `GtkTreeIter`是用于引用`GtkTreeView`中的行的結構。 `GtkTreeSelection`是處理選擇的對象。 ## `ListView` 第一個示例將顯示一個簡單的列表視圖。我們將顯示文本數據。 `listview.c` ```c #include <gtk/gtk.h> enum { LIST_ITEM = 0, N_COLUMNS }; void init_list(GtkWidget *list) { GtkCellRenderer *renderer; GtkTreeViewColumn *column; GtkListStore *store; renderer = gtk_cell_renderer_text_new (); column = gtk_tree_view_column_new_with_attributes("List Items", renderer, "text", LIST_ITEM, NULL); gtk_tree_view_append_column(GTK_TREE_VIEW(list), column); store = gtk_list_store_new(N_COLUMNS, G_TYPE_STRING); gtk_tree_view_set_model(GTK_TREE_VIEW(list), GTK_TREE_MODEL(store)); g_object_unref(store); } void add_to_list(GtkWidget *list, const gchar *str) { GtkListStore *store; GtkTreeIter iter; store = GTK_LIST_STORE(gtk_tree_view_get_model (GTK_TREE_VIEW(list))); gtk_list_store_append(store, &iter); gtk_list_store_set(store, &iter, LIST_ITEM, str, -1); } void on_changed(GtkWidget *widget, gpointer label) { GtkTreeIter iter; GtkTreeModel *model; gchar *value; if (gtk_tree_selection_get_selected( GTK_TREE_SELECTION(widget), &model, &iter)) { gtk_tree_model_get(model, &iter, LIST_ITEM, &value, -1); gtk_label_set_text(GTK_LABEL(label), value); g_free(value); } } int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *list; GtkWidget *vbox; GtkWidget *label; GtkTreeSelection *selection; gtk_init(&argc, &argv); window = gtk_window_new(GTK_WINDOW_TOPLEVEL); list = gtk_tree_view_new(); gtk_window_set_title(GTK_WINDOW(window), "List view"); gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER); gtk_container_set_border_width(GTK_CONTAINER(window), 10); gtk_window_set_default_size(GTK_WINDOW(window), 270, 250); gtk_tree_view_set_headers_visible(GTK_TREE_VIEW(list), FALSE); vbox = gtk_vbox_new(FALSE, 0); gtk_box_pack_start(GTK_BOX(vbox), list, TRUE, TRUE, 5); label = gtk_label_new(""); gtk_box_pack_start(GTK_BOX(vbox), label, FALSE, FALSE, 5); gtk_container_add(GTK_CONTAINER(window), vbox); init_list(list); add_to_list(list, "Aliens"); add_to_list(list, "Leon"); add_to_list(list, "The Verdict"); add_to_list(list, "North Face"); add_to_list(list, "Der Untergang"); selection = gtk_tree_view_get_selection(GTK_TREE_VIEW(list)); g_signal_connect(selection, "changed", G_CALLBACK(on_changed), label); g_signal_connect(G_OBJECT (window), "destroy", G_CALLBACK(gtk_main_quit), NULL); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 在我們的代碼示例中，我們在`GtkTreeView`中顯示了五個項目。我們只有一列，并且該列的標題是隱藏的。我們將`GtkVBox`放入窗口。該框具有兩個小部件：`GtkTreeView`和`GtkLabel`。 ```c list = gtk_tree_view_new(); ``` `gtk_tree_view_new()`函數創建一個新的`GtkTreeView`小部件。 ```c gtk_tree_view_set_headers_visible(GTK_TREE_VIEW(list), FALSE); ``` 我們使用`gtk_tree_view_set_headers_visible()`函數隱藏列標題。 ```c label = gtk_label_new(""); gtk_box_pack_start(GTK_BOX(vbox), label, FALSE, FALSE, 5); ``` 創建`GtkLabel`并將其放置在`GtkTreeView`下方。 ```c init_list(list); ``` 此函數初始化列表。 ```c renderer = gtk_cell_renderer_text_new(); column = gtk_tree_view_column_new_with_attributes("List Items", renderer, "text", LIST_ITEM, NULL); gtk_tree_view_append_column(GTK_TREE_VIEW(list), column); ``` 在該函數內部，我們創建并附加一列。 ```c store = gtk_list_store_new(N_COLUMNS, G_TYPE_STRING); gtk_tree_view_set_model(GTK_TREE_VIEW(list), GTK_TREE_MODEL(store)); ``` 我們創建一個`GtkListStore`（模型）并將其設置為列表。 ```c g_object_unref(store); ``` `TreeView`增加了存儲對象的引用。我們使用`g_object_unref()`函數將引用從 2 減少到 1。然后隨視圖自動銷毀模型。 ```c add_to_list(list, "Aliens"); ``` 該用戶功能將一個選項添加到列表中。 ```c store = GTK_LIST_STORE(gtk_tree_view_get_model (GTK_TREE_VIEW(list))); gtk_list_store_append(store, &iter); gtk_list_store_set(store, &iter, LIST_ITEM, str, -1); ``` 在`add_to_list()`函數內部，我們使用`gtk_tree_view_get_model()`函數調用獲得模型。我們附加一個新行，并為該行設置一個值，該值由`GtkTreeIter`對象引用。 ```c selection = gtk_tree_view_get_selection(GTK_TREE_VIEW(list)); ``` 不需要顯式創建`GtkTreeSelection`；它是使用`GtkTreeView`小部件自動創建的。使用`gtk_tree_view_get_selection()`函數調用可獲得對窗口小部件的引用。 ```c g_signal_connect(selection, "changed", G_CALLBACK(on_changed), label); ``` `GtkTreeSelection`的`changed`信號連接到`on_changed()`處理器。 ```c if (gtk_tree_selection_get_selected( GTK_TREE_SELECTION(widget), &model, &iter)) { ``` `gtk_tree_selection_get_selected()`函數將`iter`設置為當前選定的節點。 ```c gtk_tree_model_get(model, &iter, LIST_ITEM, &value, -1); ``` 在處理函數中，我們獲取`iter`對象引用的行中單元格的值。 ```c gtk_label_set_text(GTK_LABEL(label), value); ``` 檢索到的值通過`gtk_label_set_text()`函數設置為標簽。 ![List view](https://img.kancloud.cn/a5/bb/a5bbec217311c14ed7222941d22d100d_272x276.jpg) 圖：列表視圖 ## 動態列表視圖第二個示例在前一個示例中添加了其他功能。我們將能夠在列表視圖中添加和刪除項目。 `dynamiclistview.c` ```c #include <gtk/gtk.h> enum { LIST_ITEM = 0, N_COLUMNS }; GtkWidget *list; void append_item(GtkWidget *widget, gpointer entry) { GtkListStore *store; GtkTreeIter iter; const gchar *str = gtk_entry_get_text(entry); store = GTK_LIST_STORE(gtk_tree_view_get_model(GTK_TREE_VIEW(list))); gtk_list_store_append(store, &iter); gtk_list_store_set(store, &iter, LIST_ITEM, str, -1); gtk_entry_set_text(entry, ""); } void remove_item(GtkWidget *widget, gpointer selection) { GtkListStore *store; GtkTreeModel *model; GtkTreeIter iter; store = GTK_LIST_STORE(gtk_tree_view_get_model(GTK_TREE_VIEW(list))); model = gtk_tree_view_get_model(GTK_TREE_VIEW(list)); if (gtk_tree_model_get_iter_first(model, &iter) == FALSE) { return; } if (gtk_tree_selection_get_selected(GTK_TREE_SELECTION(selection), &model, &iter)) { gtk_list_store_remove(store, &iter); } } void remove_all(GtkWidget *widget, gpointer selection) { GtkListStore *store; GtkTreeModel *model; GtkTreeIter iter; store = GTK_LIST_STORE(gtk_tree_view_get_model(GTK_TREE_VIEW(list))); model = gtk_tree_view_get_model(GTK_TREE_VIEW(list)); if (gtk_tree_model_get_iter_first(model, &iter) == FALSE) { return; } gtk_list_store_clear(store); } void init_list(GtkWidget *list) { GtkCellRenderer *renderer; GtkTreeViewColumn *column; GtkListStore *store; renderer = gtk_cell_renderer_text_new(); column = gtk_tree_view_column_new_with_attributes("List Item", renderer, "text", LIST_ITEM, NULL); gtk_tree_view_append_column(GTK_TREE_VIEW(list), column); store = gtk_list_store_new(N_COLUMNS, G_TYPE_STRING); gtk_tree_view_set_model(GTK_TREE_VIEW(list), GTK_TREE_MODEL(store)); g_object_unref(store); } int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *sw; GtkWidget *remove; GtkWidget *add; GtkWidget *removeAll; GtkWidget *entry; GtkWidget *vbox; GtkWidget *hbox; GtkTreeSelection *selection; gtk_init(&argc, &argv); window = gtk_window_new(GTK_WINDOW_TOPLEVEL); gtk_window_set_title(GTK_WINDOW(window), "List view"); gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER); gtk_container_set_border_width(GTK_CONTAINER (window), 10); gtk_widget_set_size_request(window, 370, 270); sw = gtk_scrolled_window_new(NULL, NULL); list = gtk_tree_view_new(); gtk_container_add(GTK_CONTAINER(sw), list); gtk_scrolled_window_set_policy(GTK_SCROLLED_WINDOW(sw), GTK_POLICY_AUTOMATIC, GTK_POLICY_AUTOMATIC); gtk_scrolled_window_set_shadow_type(GTK_SCROLLED_WINDOW(sw), GTK_SHADOW_ETCHED_IN); gtk_tree_view_set_headers_visible(GTK_TREE_VIEW(list), FALSE); vbox = gtk_vbox_new(FALSE, 0); gtk_box_pack_start(GTK_BOX(vbox), sw, TRUE, TRUE, 5); hbox = gtk_hbox_new(FALSE, 5); add = gtk_button_new_with_label("Add"); remove = gtk_button_new_with_label("Remove"); removeAll = gtk_button_new_with_label("Remove All"); entry = gtk_entry_new(); gtk_widget_set_size_request(entry, 120, -1); gtk_box_pack_start(GTK_BOX(hbox), add, FALSE, TRUE, 3); gtk_box_pack_start(GTK_BOX(hbox), entry, FALSE, TRUE, 3); gtk_box_pack_start(GTK_BOX(hbox), remove, FALSE, TRUE, 3); gtk_box_pack_start(GTK_BOX(hbox), removeAll, FALSE, TRUE, 3); gtk_box_pack_start(GTK_BOX(vbox), hbox, FALSE, TRUE, 3); gtk_container_add(GTK_CONTAINER(window), vbox); init_list(list); selection = gtk_tree_view_get_selection(GTK_TREE_VIEW(list)); g_signal_connect(G_OBJECT(add), "clicked", G_CALLBACK(append_item), entry); g_signal_connect(G_OBJECT(remove), "clicked", G_CALLBACK(remove_item), selection); g_signal_connect(G_OBJECT(removeAll), "clicked", G_CALLBACK(remove_all), selection); g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 在示例中，我們有三個按鈕和一個文本輸入。這些按鈕添加一個新項目，刪除選定的項目，然后刪除所有項目。 ```c sw = gtk_scrolled_window_new(NULL, NULL); list = gtk_tree_view_new(); gtk_container_add(GTK_CONTAINER(sw), list); ``` `GtkTreeView`放置在滾動窗口內。 ```c if (gtk_tree_selection_get_selected(GTK_TREE_SELECTION(selection), &model, &iter)) { gtk_list_store_remove(store, &iter); } ``` `gtk_list_store_remove()`函數從列表中刪除一個項目。 ```c gtk_list_store_clear(store); ``` `gtk_list_store_clear()`從列表中刪除所有項目。 ```c if (gtk_tree_model_get_iter_first(model, &iter) == FALSE) { return; } ``` 此代碼檢查列表中是否還有剩余項目。顯然，只有列表中至少剩余一個，我們才能刪除項目。 ![Dynamic List view](https://img.kancloud.cn/17/87/17873e003abe8f931cefd5adc2e95447_372x296.jpg) 圖：動態列表視圖 ## `TreeView` 以下示例使用`GtkTreeView`小部件顯示分層數據。在前兩個示例中，我們使用了列表視圖。現在我們將使用樹形視圖。 `treeview.c` ```c #include <gtk/gtk.h> enum { COLUMN = 0, NUM_COLS }; void on_changed(GtkWidget *widget, gpointer statusbar) { GtkTreeIter iter; GtkTreeModel *model; gchar *value; if (gtk_tree_selection_get_selected( GTK_TREE_SELECTION(widget), &model, &iter)) { gtk_tree_model_get(model, &iter, COLUMN, &value, -1); gtk_statusbar_push(GTK_STATUSBAR(statusbar), gtk_statusbar_get_context_id(GTK_STATUSBAR(statusbar), value), value); g_free(value); } } GtkTreeModel *create_and_fill_model(void) { GtkTreeStore *treestore; GtkTreeIter toplevel, child; treestore = gtk_tree_store_new(NUM_COLS, G_TYPE_STRING); gtk_tree_store_append(treestore, &toplevel, NULL); gtk_tree_store_set(treestore, &toplevel, COLUMN, "Scripting languages", -1); gtk_tree_store_append(treestore, &child, &toplevel); gtk_tree_store_set(treestore, &child, COLUMN, "Python", -1); gtk_tree_store_append(treestore, &child, &toplevel); gtk_tree_store_set(treestore, &child, COLUMN, "Perl", -1); gtk_tree_store_append(treestore, &child, &toplevel); gtk_tree_store_set(treestore, &child, COLUMN, "PHP", -1); gtk_tree_store_append(treestore, &toplevel, NULL); gtk_tree_store_set(treestore, &toplevel, COLUMN, "Compiled languages", -1); gtk_tree_store_append(treestore, &child, &toplevel); gtk_tree_store_set(treestore, &child, COLUMN, "C", -1); gtk_tree_store_append(treestore, &child, &toplevel); gtk_tree_store_set(treestore, &child, COLUMN, "C++", -1); gtk_tree_store_append(treestore, &child, &toplevel); gtk_tree_store_set(treestore, &child, COLUMN, "Java", -1); return GTK_TREE_MODEL(treestore); } GtkWidget *create_view_and_model(void) { GtkTreeViewColumn *col; GtkCellRenderer *renderer; GtkWidget *view; GtkTreeModel *model; view = gtk_tree_view_new(); col = gtk_tree_view_column_new(); gtk_tree_view_column_set_title(col, "Programming languages"); gtk_tree_view_append_column(GTK_TREE_VIEW(view), col); renderer = gtk_cell_renderer_text_new(); gtk_tree_view_column_pack_start(col, renderer, TRUE); gtk_tree_view_column_add_attribute(col, renderer, "text", COLUMN); model = create_and_fill_model(); gtk_tree_view_set_model(GTK_TREE_VIEW(view), model); g_object_unref(model); return view; } int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *view; GtkTreeSelection *selection; GtkWidget *vbox; GtkWidget *statusbar; gtk_init(&argc, &argv); window = gtk_window_new(GTK_WINDOW_TOPLEVEL); gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER); gtk_window_set_title(GTK_WINDOW(window), "Tree view"); gtk_widget_set_size_request(window, 350, 300); vbox = gtk_vbox_new(FALSE, 2); gtk_container_add(GTK_CONTAINER(window), vbox); view = create_view_and_model(); selection = gtk_tree_view_get_selection(GTK_TREE_VIEW(view)); gtk_box_pack_start(GTK_BOX(vbox), view, TRUE, TRUE, 1); statusbar = gtk_statusbar_new(); gtk_box_pack_start(GTK_BOX(vbox), statusbar, FALSE, TRUE, 1); g_signal_connect(selection, "changed", G_CALLBACK(on_changed), statusbar); g_signal_connect (G_OBJECT (window), "destroy", G_CALLBACK(gtk_main_quit), NULL); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 在示例中，我們將編程語言分為兩組：腳本語言和編譯語言。語言類別是其項目列表的頂級節點。當前選擇的項目顯示在狀態欄中。創建樹視圖的步驟與創建列表視圖非常相似。 ```c treestore = gtk_tree_store_new(NUM_COLS, G_TYPE_STRING); ``` `gtk_tree_store_new()`函數創建`GtkTreeStore`，它是與`GtkTreeView`一起使用的樹狀數據結構。 ```c gtk_tree_store_append(treestore, &toplevel, NULL); gtk_tree_store_set(treestore, &toplevel, COLUMN, "Scripting languages", -1); ``` 這兩行創建一個頂級節點。 ```c gtk_tree_store_append(treestore, &child, &toplevel); gtk_tree_store_set(treestore, &child, COLUMN, "Python", -1); ``` 在這里，我們將一個子項添加到頂級節點。 ![Tree View](https://img.kancloud.cn/9a/34/9a346d9e483da8e864a52227db90375a_352x326.jpg) 圖：樹形視圖在本章中，我們介紹了`GtkTreeView`小部件。