GTK列表显示文本和图片

关于MVC

M层: model 数据模型层(处理数据的增删改查) 提供数据

V层: Views 视图层 (数据展示) 渲染数据

C层: controller 控制层(处理业务逻辑) 调用数据渲染视图

使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。

GtkTreeView/GtkTreeModel使用的是MVC设计理念。

GtkListStore、GtkTreeStore、GtkTreeModel、GtkTreeView

GtkListStore 和 GtkTreeStore 都是 GtkTreeModel 的具体实现：GtkListStore 用于存储简单的列表数据（单层结构），GtkTreeStore 用于存储树形结构数据（支持父子层级）

而 GtkTreeView 是用于展示数据的视图控件，它通过 GtkTreeModel 接口来访问数据，可以无缝地使用 GtkListStore 或 GtkTreeStore 作为数据源。

简单来说，Store 负责存储数据并实现 TreeModel 接口，TreeView 负责显示，通过 TreeModel 作为中间层将两者解耦，使得同一份数据可以用不同视图展示，或同一视图可以切换不同数据源。

组件	类型	数据存储	层次结构	是否可视
GtkTreeModel	接口	❌ 无	-	❌ 不可视
GtkListStore	具体类	✅ 扁平数据	❌ 无父子关系	❌ 不可视
GtkTreeStore	具体类	✅ 树形数据	✅ 支持父子关系	❌ 不可视
GtkTreeView	控件类	❌ 不存储	-	✅ 可视控件

代码

使用GtkTreeView控件显示包含文本和图片的列表的简单代码




#include <gtk/gtk.h>



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

{

    GtkWidget *window;

    GtkWidget *treeview;

    GtkListStore *liststore;

    GtkTreeViewColumn *column;

    GtkCellRenderer *cell;

    GtkTreeIter iter;

    GdkPixbuf *pixbuf;



    // 初始化GTK

    gtk_init(&argc, &argv);



    // 创建窗口

    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);

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



    // 创建列表存储

    liststore = gtk_list_store_new(2, GDK_TYPE_PIXBUF, G_TYPE_STRING);



    // 添加图像和文本到列表存储

    pixbuf = gdk_pixbuf_new_from_file("image.jpg", NULL);

    gtk_list_store_append(liststore, &iter);

    gtk_list_store_set(liststore, &iter, 0, pixbuf, 1, "Image 1", -1);//添加图片和文本到行

    g_object_unref(pixbuf);//释放资源



    pixbuf = gdk_pixbuf_new_from_file("image2.jpg", NULL);

    gtk_list_store_append(liststore, &iter);

    gtk_list_store_set(liststore, &iter, 0, pixbuf, 1, "Image 2", -1);

    g_object_unref(pixbuf);



    // 创建列表视图

    treeview = gtk_tree_view_new_with_model(GTK_TREE_MODEL(liststore));



    // 创建图像列

    cell = gtk_cell_renderer_pixbuf_new();

    column = gtk_tree_view_column_new_with_attributes("Image", cell, "pixbuf", 0, NULL);//创建名为Image的图像列

    gtk_tree_view_append_column(GTK_TREE_VIEW(treeview), column);//添加图像列



    // 创建文本列

    cell = gtk_cell_renderer_text_new();

    column = gtk_tree_view_column_new_with_attributes("Text", cell, "text", 1, NULL);//创建名为Text的文本列

    gtk_tree_view_append_column(GTK_TREE_VIEW(treeview), column);//添加文本列



    // 将列表视图添加到窗口中

    gtk_container_add(GTK_CONTAINER(window), treeview);



    // 显示窗口

    gtk_widget_show_all(window);



    // 运行主循环

    gtk_main();



    return 0;

}

结果