GtkComboBox 與 GtkTreeStore

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

#include <gtk/gtk.h>



gboolean combo_changed(GtkComboBox *comboBox, GtkLabel *label) {


    gchar *active = gtk_combo_box_get_active_text(comboBox);


    gtk_label_set_text(label, active);


}




int main(int argc, char *argv[]) {

    GtkWidget *window;

    GtkWidget *comboBox;


    GtkWidget *label;

    GtkWidget *vbox;



    gtk_init(&argc, &argv);



    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);

    gtk_window_set_title(GTK_WINDOW(window), "GtkComboBox");

    gtk_window_set_default_size(GTK_WINDOW(window), 200, 50);



    comboBox = gtk_combo_box_new_text();


    gtk_combo_box_append_text(GTK_COMBO_BOX(comboBox), "caterpillar");


    gtk_combo_box_append_text(GTK_COMBO_BOX(comboBox), "momor");


    gtk_combo_box_append_text(GTK_COMBO_BOX(comboBox), "hamimi");


    gtk_combo_box_append_text(GTK_COMBO_BOX(comboBox), "bush");


    gtk_combo_box_set_active(GTK_COMBO_BOX(comboBox), 0);




    label = gtk_label_new("caterpillar");

    vbox = gtk_vbox_new(TRUE, 5);



    gtk_box_pack_start(GTK_BOX(vbox), comboBox, TRUE, TRUE, 5);


    gtk_box_pack_start(GTK_BOX(vbox), label, TRUE, TRUE, 5);

    gtk_container_add(GTK_CONTAINER(window), vbox);



    g_signal_connect(GTK_OBJECT(comboBox), "changed",


                     G_CALLBACK(combo_changed), label);




    g_signal_connect(GTK_OBJECT(window), "destroy",

                     G_CALLBACK(gtk_main_quit), NULL);



    gtk_widget_show_all(window);



    gtk_main();



    return 0;

}

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

 

上面的範例，是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

#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);


        


    }




    return GTK_TREE_MODEL(store);


}




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);


}




int main(int argc, char *argv[]) {

    GtkWidget *window;

    GtkWidget *comboBox;


    GtkCellRenderer *renderer;


    GtkWidget *label;

    GtkWidget *vbox;



    gtk_init(&argc, &argv);



    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);

    gtk_window_set_title(GTK_WINDOW(window), "GtkComboBox");

    gtk_window_set_default_size(GTK_WINDOW(window), 200, 50);



    comboBox = gtk_combo_box_new_with_model(createModel());


    gtk_combo_box_set_active(GTK_COMBO_BOX(comboBox), 0);


    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", PIXBUF_COL, 


				   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", TEXT_COL,


				   NULL);    




    label = gtk_label_new("caterpillar.jpg");

    vbox = gtk_vbox_new(TRUE, 5);



    gtk_box_pack_start(GTK_BOX(vbox), comboBox, TRUE, TRUE, 5);


    gtk_box_pack_start(GTK_BOX(vbox), label, TRUE, TRUE, 5);

    gtk_container_add(GTK_CONTAINER(window), vbox);



    g_signal_connect(GTK_OBJECT(comboBox), "changed",


                     G_CALLBACK(combo_changed), label);




    g_signal_connect(GTK_OBJECT(window), "destroy",

                     G_CALLBACK(gtk_main_quit), NULL);



    gtk_widget_show_all(window);



    gtk_main();



    return 0;

}

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

<script type="text/javascript"> document.body.oncopy = function() { if (window.clipboardData) { setTimeout(function() { var text = clipboardData.getData("text"); if (text && text.length>300) { text = text + "/r/n/n本文来自CSDN博客，转载请标明出处：" + location.href; clipboardData.setData("text", text); } }, 100); } } </script> <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 ，有了其中的觀念，接下來要使用GtkTreeStore就不是難事了，只是多了父子關係的部份。

若想要製作有階層的樹狀結構，則要搭配GtkTreeStore來使用，主要的差別在於，GtkTreeStroe具 有父子節點關係，也因此在加入子節點時，必須指明父節點為誰，加入節點可以使用gtk_tree_store_append()函式，設定節點資料可以使 用gtk_tree_store_set()函式：

void gtk_tree_store_append(GtkTreeStore *tree_store,
                           GtkTreeIter *iter,
                           GtkTreeIter *parent); void gtk_tree_store_set(GtkTreeStore *tree_store,                         GtkTreeIter *iter,                         ...);

使用gtk_tree_store_append()時若無父節點，則第三個參數設定為NULL，表示這是最上層節點，也因此，您必須有兩個GtkTreeIter，一個指向目前GtkTreeStore中的父節點位置，一個用以指向子節點位置。 下面這個程式改寫 GtkComboBox 與 GtkListStore ， 使其具有子階層，在GtkComboBox中會以子選單方式呈現，子選單的內容是亂數選取決定的，程式的改寫主要都是在Model的建立部份：

• gtk_combo_box_with_tree_demo.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 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);

}



int main(int argc, char *argv[]) {

    GtkWidget *window;

    GtkWidget *comboBox;

    GtkCellRenderer *renderer;

    GtkWidget *label;

    GtkWidget *vbox;



    gtk_init(&argc, &argv);



    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);

    gtk_window_set_title(GTK_WINDOW(window), "GtkComboBox");

    gtk_window_set_default_size(GTK_WINDOW(window), 200, 50);



    comboBox = gtk_combo_box_new_with_model(createModel());

    gtk_combo_box_set_active(GTK_COMBO_BOX(comboBox), 0);

    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", PIXBUF_COL, 

				   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", TEXT_COL,

				   NULL);    



    label = gtk_label_new("caterpillar.jpg");

    vbox = gtk_vbox_new(TRUE, 5);



    gtk_box_pack_start(GTK_BOX(vbox), comboBox, TRUE, TRUE, 5);

    gtk_box_pack_start(GTK_BOX(vbox), label, TRUE, TRUE, 5);

    gtk_container_add(GTK_CONTAINER(window), vbox);



    g_signal_connect(GTK_OBJECT(comboBox), "changed",

                     G_CALLBACK(combo_changed), label);



    g_signal_connect(GTK_OBJECT(window), "destroy",

                     G_CALLBACK(gtk_main_quit), NULL);



    gtk_widget_show_all(window);



    gtk_main();



    return 0;

}

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