GTK treeview原理及使用方法解析

GtkTreeView 构件是一个高级的构件,利用他你就可以制作出漂亮的普通列表或者是树状的列表。这个构件里可以包含一或者多行。他的构架呢?正是采用了大名鼎鼎的MVC (Model View Controller) 设计框架。也就是说数据和显示方式是进行了一种分离的操作。

于是在GtktreeView构件中确实还有着其他几个独立的对象结构(objects)。

其中 GtkCellRenderer 就决定了在GtkTreeViewColumn. 中的数据究竟是如何来进行显示呈现的。

GtkListStore 和GtkTreeStore 的功能为体现模型(model)的作用。

也就是说他们是用来处理和分析将要在GtkTreeView显示的数据的。

GtkTreeIter 则是一个数据结构被用于在GtkTreeView构件中,对行中的数据进行操作。

GtkTreeSelection 则是用来处理选项的。

效果如下

代码如下

#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_widget_set_size_request(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;
}

在我们上面的这个示例代码中,我们将向大家展示的是5个条目并布置于GtkTreeView 构件中。我们首先在window中放置一个GtkVBox 构件。 在这个 GtkVBox 构件中含有两个构件:GtkTreeView和GtkLabel。

list = gtk_tree_view_new();
gtk_tree_view_set_headers_visible(GTK_TREE_VIEW(list), FALSE);

调用list()函数,初始化构件list。

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

在初始化函数中,我们生成了只有一栏的GtkTreeView。

store = gtk_list_store_new(N_COLUMNS, G_TYPE_STRING);
 gtk_tree_view_set_model(GTK_TREE_VIEW(list),
   GTK_TREE_MODEL(store));

接下来我们又生成了一个GtkListStore 构件(a model) 然后把它与list 构件绑定。

g_object_unref(store);

这个 model 被自动的销毁,以释放内存空间。

add_to_list(list, "Aliens");

上面就是在调用add_to_list()函数,实现向list 中在增加一个选项的功能。

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()来获得model。我们生成新的一行并把行中的数据交给model处理,这里正是借助GtkTreeIter来完成这个功能。

selection = gtk_tree_view_get_selection(GTK_TREE_VIEW(list));

GtkTreeSelection际上并不需要明确生成。在这里,我们是利用 GtkTreeView构件自动来生成。来帮助完成这项工作的正如你所见到的是系统函数gtk_tree_view_get_selection()。

好了再练习一下

增加一栏

代码如下

#include <gtk/gtk.h>

enum
{
  LIST_ITEM = 0,
  LIST_AGE,
  N_COLUMNS
};

void init_list(GtkWidget *list)
{
  //要想让视图显示出数据,必须建立GtkCellRenderer与GtkTreeViewColumn
  GtkCellRenderer *renderer;
  GtkTreeViewColumn *column;
  GtkListStore *store;

  //建立一个GtkCellRenderer
  renderer = gtk_cell_renderer_text_new ();
  //建立一个带标题的列 并且将renderer放入其中使其能显示内容
  column = gtk_tree_view_column_new_with_attributes("List Items", renderer, "text", LIST_ITEM, NULL);
  //将列加入gtk_tree_view
  gtk_tree_view_append_column(GTK_TREE_VIEW(list), column);

  //建立一个GtkCellRenderer
  renderer = gtk_cell_renderer_text_new ();
  //g_object_set (G_OBJECT (renderer), "xalign", 1.0, NULL);//居右
  //建立一个带标题的列 并且将renderer放入其中使其能显示内容
  column = gtk_tree_view_column_new_with_attributes("List age", renderer, "text", LIST_AGE, NULL);
  //将列加入gtk_tree_view
  gtk_tree_view_append_column(GTK_TREE_VIEW(list), column);

  store = gtk_list_store_new(N_COLUMNS, G_TYPE_STRING,G_TYPE_INT);

  //关联视图与模型
  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 ,gint age)
{

  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,LIST_AGE,age, -1);
}

void on_changed(GtkWidget *widget, gpointer label)
{

  GtkTreeIter iter;
  GtkTreeModel *model;
  gchar *value;

  //获得treeview中选中的一行的GtkTreeIter
  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_widget_set_size_request(window, 270, 250);

  //设置标题的可见性状态。
  gtk_tree_view_set_headers_visible(GTK_TREE_VIEW(list), TRUE );

  vbox = gtk_box_new (GTK_ORIENTATION_VERTICAL, 0);//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"    ,10 );
  add_to_list(list, "Leon"     ,2 );
  add_to_list(list, "The Verdict" ,30 );
  add_to_list(list, "North Face"  ,4 );
  add_to_list(list, "Der Untergang",50 );

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • WPF自定义TreeView控件样式实现QQ联系人列表效果

    一.前言 TreeView这个控件对于我来说是用得比较多的,以前做的小聊天软件(好友列表).音乐播放器(播放列表).类库展示器(树形类结构)等都用的是TreeView,普通的TreeView并不能满足我们的需求.因此我们需要滴对TreeView进行改造.下面的内容将介绍仿QQ联系人TreeView样式及TreeView数据绑定方法. 二.TreeView仿QQ联系人列表 准确的说不是仿QQ联系人列表,这个TreeView样式作为组织架构来使用更好.废话不多说,先看效果:  2.1.基本思路 像这

  • Bootstrap树形菜单插件TreeView.js使用方法详解

    jQuery多级列表树插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 实用Bootstrap树形菜单特效插件Bootstrap Tree View,非常不错的Bootstrap插件,现在很多Bootstrap制作的页面都需要此功能,此插件需要Bootstrap3版本以及jQuery 2.0极以上版本支持,支持众多参数自定义功能,颜色.背景色.图标.链接等,还是很不错的. 效果图: 具体使用方法: 插件依赖 Bootstrap v3.0.

  • 对Python 窗体(tkinter)树状数据(Treeview)详解

    如下所示: import tkinter from tkinter import ttk #导入内部包 win=tkinter.Tk() tree=ttk.Treeview(win) #参数:parent, index, iid=None, **kw (父节点,插入的位置,id,显示出的文本) myid=tree.insert("",0,"中国",text="中国China",values=("1")) # "&qu

  • Android UI 之实现多级树形列表TreeView示例

    所谓TreeView就是在Windows中常见的多级列表树,在Android中系统只默认提供了ListView和ExpandableListView两种列表,最多只支持到二级列表的实现,所以如果想要实现三级和更多层次的列表,就需要我们自己来做一些处理了. 其实这个效果很久以前就有人想办法实现了,但是实现的效果有一些问题,我的实现思路主要也是来自于网络,但是在其基础上修正了逻辑上的一些错误,做了一些优化. 先来看一下效果: 然后大体说一下思路: 其实这里实现的多级列表只是一个视觉效果,我们看到的分

  • JS树形菜单组件Bootstrap TreeView使用方法详解

    简要介绍: 之前手头的一个项目需要去做一个左侧的树形菜单,右侧则是一个整体的iframe,从而构成一个整体的网站.一开始是打算用bootstrap的tree-view插件,直接把菜单的数据传过去就好了,结果后来项目又改了需求,菜单的内容和图表都是后台动态生成的,所以只能放弃使用bootstrap插件,自己着手写了一个树形菜单.本文主要分两部分讲,一个是对于bootstrap的treeview的实践,另一部分是介绍自己写的树形菜单. bootstrap-treeview: 组件介绍:http://

  • bootstrap treeview 树形菜单带复选框及级联选择功能

    具体代码如下所示: <div id="searchTree"></div> <script> var treeData = [{ text: "Parent 1", nodes: [{ text: "Child 1", nodes: [{ text: "Grandchild 1" }, { text: "Grandchild 2", nodes: [{ text: &qu

  • Android TreeView实现带复选框树形组织结构

    之前做项目的时候做人员组织架构时候需要用到,同样可以用于目录视图.简单搜了一下没有合适的,只找到一个基础的有瑕疵的树形结构,就在基础上改了增加了复选框以及简化了部分代码.下面上演示效果图,时长25秒,手机卡见谅. 复选框有两种设计模式: 1.子节点选中则父节点选中,适合多级多item下方便了解哪些被选中: 2.子节点全部选中父节点才选中,更符合日常逻辑,适合少数量以及少层级. 下面上主要代码: 首先上MainActivity,主要作用上加载layout以及读取数据.实际中一般从数据库获取.命名较

  • Bootstrap treeview实现动态加载数据并添加快捷搜索功能

    写在前面: jQuery多级列表树插件基于Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等. 实用Bootstrap树形菜单特效插件Bootstrap Tree View,非常不错的Bootstrap插件,现在很多Bootstrap制作的页面都需要此功能,此插件需要Bootstrap3版本以及jQuery 2.0极以上版本支持,支持众多参数自定义功能,颜色.背景色.图标.链接等,还是很不错的. 具体效果请暂时移步: http://jonmiles.github.io

  • 浅析BootStrap Treeview的简单使用

    bootstrap-treeview.js1是一款强大的树菜单插件,本文给大家介绍bootstrap treeview的简单使用. 废话不多说,直接上干干货. 1.bootstrap-treeview Github网址: https://github.com/jonmiles/bootstrap-treeview 2.使用要求: <!-- 样式表 --> <link href="~/Content/bootstrap.css" rel="stylesheet

  • GTK treeview原理及使用方法解析

    GtkTreeView 构件是一个高级的构件,利用他你就可以制作出漂亮的普通列表或者是树状的列表.这个构件里可以包含一或者多行.他的构架呢?正是采用了大名鼎鼎的MVC (Model View Controller) 设计框架.也就是说数据和显示方式是进行了一种分离的操作. 于是在GtktreeView构件中确实还有着其他几个独立的对象结构(objects). 其中 GtkCellRenderer 就决定了在GtkTreeViewColumn. 中的数据究竟是如何来进行显示呈现的. GtkList

  • Mysql临时表原理及创建方法解析

    这篇文章主要介绍了Mysql临时表原理及创建方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 mysql 利用 temporary 关键字就可以创建出一个临时表.创建的这张表会在与服务器的会话终止时自动消失 语法:create temporary table tbl_name...; 规则:每个会话只能看到自己创建的临时表,不同的会话可以创建相同表名称的临时表.临时表的表名可以和永久表的名字相同. 好处:可以利用临时表保存一些临时数据,断

  • Java常用线程池原理及使用方法解析

    一.简介 什么是线程池? 池的概念大家也许都有所听闻,池就是相当于一个容器,里面有许许多多的东西你可以即拿即用.java中有线程池.连接池等等.线程池就是在系统启动或者实例化池时创建一些空闲的线程,等待工作调度,执行完任务后,线程并不会立即被销毁,而是重新处于空闲状态,等待下一次调度. 线程池的工作机制? 在线程池的编程模式中,任务提交并不是直接提交给线程,而是提交给池.线程池在拿到任务之后,就会寻找有没有空闲的线程,有则分配给空闲线程执行,暂时没有则会进入等待队列,继续等待空闲线程.如果超出最

  • PHP unset函数原理及使用方法解析

    unset-释放给定的变量 说明 unset(mixed$var[,mixed$...] ) :void unset()销毁指定的变量. unset()在函数中的行为会依赖于想要销毁的变量的类型而有所不同. 如果在函数中unset()一个全局变量,则只是局部变量被销毁,而在调用环境中的变量将保持调用unset()之前一样的值. <?php function destroy_foo() { global $foo; unset($foo); } $foo = 'bar'; destroy_foo(

  • Python特殊属性property原理及使用方法解析

    1 什么是特性property property是一种特殊的属性,访问它时会执行一段功能(函数)然后返回值 import math class Circle: def __init__(self,radius): #圆的半径radius self.radius=radius @property def area(self): return math.pi * self.radius**2 #计算面积 @property def perimeter(self): return 2*math.pi*

  • Javascript Symbol原理及使用方法解析

    Symbol是ES6中新引入的一种基本数据类型,在此之前JavaScript中已有几种基本数据类型: Numberg String Boolean Null Undefined Object 不同于其他基本类型的通俗易懂,Symbol 是什么和有什么用一直有些让人困惑. 什么是Symbol JavaScript标准中规定对象的key只能是 String 或 Symbol 类型,区别在于 String 类型的key可以重复而 Symbol 类型的key是唯一的.Symbol 的本质是表示一个唯一标

  • Python -m参数原理及使用方法解析

    python -m xxx.py 作用是:把xxx.py文件当做模块启动 但是我一直不明白当做模块启动到底有什么用.python xxx.py和python -m xxx.py有什么区别! 自问自答: python xxx.py python -m xxx.py 这是两种加载py文件的方式: 1叫做直接运行 2把模块当作脚本来启动(注意:但是__name__的值为'main' ) 不同的加载py文件的方式,主要是影响--sys.path 这个属性.sys.path 就相当于liunx中的PATH

  • Docker容器数据卷原理及使用方法解析

    什么是容器数据卷 如果数据都在容器中,一旦容器删除,数据就会丢失! eg : mysql容器删了,就是我们常说的删库跑路. 需求:数据可以持久化,即时删掉容器,我们的数据还在 容器直接可以有一个数据共享的技术!Docker容器产生的数据,同步到本地! 这就是卷技术!目录的挂载,将我们容器的目录挂载到linux上面! 总结:卷技术就是为了实现数据的持久化和同步操作,容器间也是可以数据共享的 使用数据卷 方式一:直接使用命令来挂载 -v # 命令 docker run -it -v 主机的目录:容器

  • UrlRewrite概念原理及使用方法解析

    URL Rewrite即URL重写,就是把传入Web的请求重定向到其他URL的过程.URL Rewrite最常见的应用是URL伪静态化,是将动态页面显示为静态页面方式的一种技术.比如http://www.123.com/news/index.asp?id=123 使用UrlRewrite转换后可以显示为 http://www.123.com/news/123.html URL Rewrite有什么用? 1,首先是满足观感的要求. 对于追求完美主义的网站设计师,就算是网页的地址也希望看起来尽量简洁

  • Jenkins插件pipeline原理及使用方法解析

    摘要: pipeline字面意思就是流水线,将很多步骤按顺序排列好,做完一个执行下一个.下面简单介绍下如何使用该插件帮我们完成一些流水线型的任务 pipeline字面意思就是流水线,将很多步骤按顺序排列好,做完一个执行下一个.下面简单介绍下如何使用该插件帮我们完成一些流水线型的任务 一,安装pipeline 进入jenkins的[系统管理]--[插件管理]页面,选择[可选插件]然后搜索pipeline. 然后选择直接安装,它会将依赖的一些插件也一并安装.安装完成后重启jenkins就可以使用了.

随机推荐