GtkComboBox 与 GtkListStore

GtkComboBox可以建立下拉选单，以供使用者选取项目，GtkComboBox实现了Model-View模式，可提供丰富的项目类型与表现方式，但这也提高了程式撰写时的复杂度，为此，GtkComboBox提供了gtk_combo_box_new_text()以建立一 般常用的文字下拉清单功能之GtkComboBox，若想要设定下拉清单中的文字项目，则可以使用gtk_combo_box_append_text ()、 gtk_combo_box_insert_text()、gtk_combo_box_prepend_text()、 gtk_combo_box_remove_text()、gtk_combo_box_get_active_text()等函式。 下面这个程式是个简单的示范，实作只有文字选项的GtkComboBox，作为介绍GtkComboBox的开始，下拉选定项目后，会在下方的GtkLabel显示所选中的文字：

• gtk_combo_box_demo.c

一个执行时的画面如下所示：

 

上面的范例，是GtkComboBox最简单的用法，选项只有纯文字，若想要进一步让GtkComboBox呈现更多的功能与样貌，则必须了解GtkComboBox的Model-View设计。 GtkComboBox的外观是View物件的部份，选项资料的部份则是Model物件的部份，GtkComboBox使用的Model物件为实作 GtkTreeModel介面的物件，例如GtkListStore或GtkTreeStore，其实作了Model物件的资料储存与存取方式等，在这边 先介绍GtkComboBox与GtkListStore的使用。 GtkListStore是没有阶层平坦式的资料，当下拉选单需要的是直接列示选项就可以使用，GtkListStore中可以设定文字、图片、元件等，要建立GtkListStore，必须指明要建立几个栏位以及栏位中的型态，例如：

GtkListStore *store = gtk_list_store_new(2, GDK_TYPE_PIXBUF, G_TYPE_STRING);

这个程式片段将建立一个具有两个栏位的GtkListStore，一个栏位储存图片，使用GDK_TYPE_PIXBUF来指定，栏位将储存的是GdkPixbuf，另一个储存文字，使用G_TYPE_STRING来指定。 您可以使用gdk_pixbuf_new_from_file()读取图档并传回其GdkPixbuf，第二个参数是GError，若不需要可以设定为NULL：

GdkPixbuf *pixbuf = gdk_pixbuf_new_from_file(files[i], NULL);

GtkListStore使用GtkTreeIter作为内部的资料位置指标，当您使用gtk_list_store_append()时，会将 GtkTreeIter指向GtkListStore下一列的位置，接著您再搭配gtk_list_store_set()设定GtkListStore 该位置的栏位资料，例如：

GtkTreeIter iter;
gtk_list_store_append(store, &iter);
gtk_list_store_set(store, &iter,
                   0, pixbuf,
                   1, filename,
                   -1);

gtk_list_store_set()的前两个参数分别为GtkListStore与GtkTreeIter，之后则两两成对指定栏位索引与资料，最后以-1作为结束。 有了GtlListStore这个Model物件之后，接著可以用以建立View，也就是GtkComboBox，您可以使用gtk_combo_box_new_with_model()来建立：

GtkWidget *comboBox = gtk_combo_box_new_with_model(GTK_TREE_MODEL(store));

您的资料要如何显示，需要对应的GtkCellRenderer来进行绘制，哪个栏位要使用哪个 GtkCellRenderer以及该栏位的一些相关属性，则要告知GtkCellLayout，GtkComboBox有实作 GtkCellLayout介面，因此，您可以如下使用gtk_cell_layout_pack_start()设定GtkCellRenderer绘 制哪个栏位，以及使用gtk_cell_layout_set_attributes()设定相关属性：

GtkCellRender *render; renderer = gtk_cell_renderer_pixbuf_new();
gtk_cell_layout_pack_start(GTK_CELL_LAYOUT(comboBox), renderer, FALSE);
gtk_cell_layout_set_attributes(GTK_CELL_LAYOUT(comboBox), renderer,
                               "pixbuf", 0, // "pixbuf" 设定图像
                               NULL);  // 最后以 NULL 结尾
renderer = gtk_cell_renderer_text_new();
gtk_cell_layout_pack_start(GTK_CELL_LAYOUT(comboBox), renderer, FALSE);
gtk_cell_layout_set_attributes(GTK_CELL_LAYOUT(comboBox), renderer,
                               "text", 1, // "text" 设定文字
                               NULL);

以上这些大致上是设定GtkComboBox的Model与View的基本流程。假设现在使用者选择下拉清单中的选项，则要取得选项资料，则需先取得 Model，也就是CtkComboBox中的GtkListStore，并取得选中的选项之GtkTreeIter（记得吗？GtkTreeIter指 向GtkListStore中的某列资料），然后再使用gtk_tree_model_get()取得想要的栏位值，例如：

gboolean combo_changed(GtkComboBox *comboBox, GtkLabel *label) {
    GtkTreeModel *model = gtk_combo_box_get_model(comboBox);
    GtkTreeIter iter;
    gchar *active;
    gtk_combo_box_get_active_iter(comboBox, &iter);
    gtk_tree_model_get(model, &iter,
                       1, &active,
                       -1);

    gtk_label_set_text(label, active);
}

综合以上说明，来改写一下上面的范例，让下拉选项可以拥有一个小图示：

• gtk_combo_box_with_icon_demo.c

一个执行的结果如下所示：