GTK
GTK+的简介
GTK+(GIMP Toolkit)是一套源码以LGPL许可协议分发、跨平台的图形工具包。最初是为GIMP写的,已成为一个功能强大、设计灵活的一个通用图形库,是GNU/Linux下开发图形界面的应用程序的主流开发工具之一。并且,GTK+也有Windows版本和Mac OS X版。
GTK+ 是一种图形用户界面(GUI)工具包。也就是说,它是一个库(或者,实际上是若干个密切相关的库的集合),它支持创建基于 GUI 的应用程序。可以把 GTK+ 想像成一个工具包,从这个工具包中可以找到用来创建 GUI 的许多已经准备好的构造块。差不多已经 10 年过去了。今天,在 GTK+ 的最新稳定版本 —— 2.8 版上(3.0测试中),仍然在进行许多活动,同时,GIMP 无疑仍然是使用 GTK+ 的最著名的程序之一,不过它已经不是惟一的使用 GTK+ 的程序了。已经为 GTK+ 编写了成百上千的应用程序,而且至少有两个主要的桌面环境(Xfce 和 GNOME)用 GTK+ 为用户提供完整的工作环境。
GTK+虽然是用C语言写的,但是您可以使用你熟悉的语言来使用GTK+,因为GTK+已经被绑定到几乎所有流行的语言上,如:C++,PHP, Guile,Perl, Python, TOM, Ada95, Objective C, Free Pascal, and Eiffel。
GTK 官网:https://www.gtk.org/
GTK-Project:https://www.gtk.org/download/index.php
GTK特点
- 现代化、更新快:GTK+ 是采用软件开发中的最新技术开发的,只要发现缺陷(BUG)(肯定有缺陷,因为没有任何软件是完美的),开发人员就会尽力在下一版本中修补缺陷。使用现代的软件意味着,您不会陷在过时的工作中,而跟不上时代的发展。
- 国际化、可访问性:在创建要让所有人使用的软件的时候,请记住三个关键字:国际化、本地化和可访问性(通常分别缩写为 i18n、l10n 和 a11y)。
- 简单易用:这一点应当很明显,但是它实际上含义丰富。工具包对用户应当容易,这样才有可能创建简单的、直觉的和乐于使用的界面,哪怕针对的是新手。创建人机交互的正确模型不是一项简单的任务,GTK+ 正是长时间工作的结果,而且是众多的甚至困难的决策的结果。
- 设计灵活、可扩展:编写 GTK+ 的方式允许在不扭曲基本设计的情况下,让维护人员添加新功能、让用户利用新功能。工具包也是可扩展的,这意味着可以向其中添加自己的块,并用使用内置块一样的方式使用它们。例如,可以编写自己的控制元素,比如说用于显示应用程序处理的科学数据,并让它正确地遵照用户选择的显示风格,就像 GTK+ 自身的控件那样。
- 自由、开放:自由软件 意味着每个人不仅可以自由地获得和使用这个工具包,还可以在满足某些条件的情况下修改并重新发布它。自由开放源码许可 意味着这些条件不是严格限制的,可以得到的自由程度是显著的。
- 可移植:GTK+ 是可移植的。这意味着用户可以在许多平台和系统上运行它。另一方面,开发人员可以把软件提供给众多用户,却只要编写一次程序,还可以使用许多不同的编程和开发平台、工具和编程语言。所有这些都可以理解为更多的潜在用户,您可以利用更好地满足需求的更广泛的技能和工具。
GTK+的安装
第一步,下载GTK+,GTK+ for Windows
地址01:win32版本,https://gtk.en.softonic.com/
地址02:https://sourceforge.net/projects/gtk-win/
地址03:http://gladewin32.sourceforge.net/
第二步,软件安装的时候,一般会自动加载。也可以手动加载,将其中bin文件夹,加入进系统环境变量, D:\Program Files\gdk_2.14.6-1_win32\bin
image第三步,在cmd中运行: pkg-config –cflags gtk+-3.0
第四步,import cairocffi as cairo ,发现不会报错
GTK+的使用方法
1.启动程序
以前的版本要写一个GTK程序都是按照以下流程
int main(int argc, char *argv[])
{
GtkWidget *window;
gtk_init(&argc,&argv);
... ...
gtk_main();
return 0;
}
现在最新的GTK+ 3.20的版本一般是按照以下格式初始,main函数里新建一个GtkApplication类app,并绑定activate回调函数,应用程序只需在activate写就可以了,main里的是启动代码,对于所有程序来说都是一样的。
int main(int argc , char **argv)
{
GtkApplication *app;
int app_status;
app = gtk_application_new("org.rain.example" , G_APPLICATION_FLAGS_NONE);
g_signal_connect(app , "activate" , G_CALLBACK(activate) , NULL);
app_status = g_application_run(G_APPLICATION(app) , argc , argv);
g_object_unref(app);
return app_status;
}
这种方式在windows下有个问题,在activate设置断点时进不去,不知道什么原因。
2.新建一个窗口
代码不用过多解释,基本上看一眼就会,这里GTK_WINDOW (window)是把类型强制转换为GtkWindow,GtkWindow是GtkWidget的一个子类
static void
activate (GtkApplication* app,
gpointer user_data)
{
GtkWidget *window;
window = gtk_application_window_new (app);
gtk_window_set_title (GTK_WINDOW (window), "Window");
gtk_window_set_default_size (GTK_WINDOW (window), 200, 200);
gtk_widget_show_all (window);
}
效果如图
这里写图片描述3.添加一个按钮
代码如下
static void
activate (GtkApplication *app,
gpointer user_data)
{
GtkWidget *window;
GtkWidget *button;
GtkWidget *button_box;
window = gtk_application_window_new (app);
gtk_window_set_title (GTK_WINDOW (window), "Window");
gtk_window_set_default_size (GTK_WINDOW (window), 200, 200);
button_box = gtk_button_box_new (GTK_ORIENTATION_HORIZONTAL);
gtk_container_add (GTK_CONTAINER (window), button_box);
button = gtk_button_new_with_label ("Hello World");
g_signal_connect (button, "clicked", G_CALLBACK (print_hello), NULL);
g_signal_connect_swapped (button, "clicked", G_CALLBACK (gtk_widget_destroy), window);
gtk_container_add (GTK_CONTAINER (button_box), button);
gtk_widget_show_all (window);
}
上述代码新建了一个按钮,并把按钮添加到window容器里
gtk_container_add (GTK_CONTAINER (button_box), button);
通过g_signal_connect设置回调函数,点击后会运行print_hello回调函数,并关闭窗口
4.容器控件
GTK中的所有元素都叫做控件,控件分为2种:
- 容器控件
- 非容器控件
非容器控件不能再容纳其他控件,如标签(GtkLabel)、图像(GtkImage)、画布(GtkDrawingArea)等界面编程中最基本的元素。而容器控件可以容纳其他控件,而上节中的window就是一个容器控件。
注意了!!
GTK中的容器控件又分为只能容纳一个控件的容器和能容纳多个控件的容器,如果在只能容纳一个控件的容器里添加多个容器就会出错。初学者一般会这样写程序,先新建一个窗口,然后再向窗口添加各种各样的控件。但是,窗口控件是一个只能容纳一个控件的容器
,往上面添加了一个按钮后,再想添加一个按钮GTK就会报错。所以正确的做法应该是先向窗口中添加一个能容纳多个控件的容器,再向这个容器里添加所需的控件。
只能容纳一个控件的容器:
- 窗口类
- 对话框
- 按钮
- 框架
- 事件盒
能容纳多个控件的容器又分为2种,一种是不能设定子控件的位置,但是可以设定控件的排放次序的容器,以盒状容器(GtkBox)为代表,它又分为横向排列和纵向排列的容器
- 横向:
GtkWidget *hbox = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 0);
- 纵向
GtkWidget *vbox = gtk_box_new (GTK_ORIENTATION_VERTICAL, 0);
可以设定自控位置的容器有2种:
- 自由布局控件(GtkFixed)– 能按固定坐标放置子控件的容器
- 布局控件(GtkLayout)– 是个无穷大的滚动区域,能包含子控件,也能制定绘图
在实际开发中结合box容器和fixed容器通常能满足大部分需求。
5.设定按钮位置
可以通过fixed容器来完成,默认是在窗口的中央,现在设定在坐标(10,10)的位置
GtkWidget *fixed = gtk_fixed_new();
gtk_container_add (GTK_CONTAINER (window), fixed);
GtkWidget *button = gtk_button_new_with_label("Button");
gtk_fixed_put(GTK_FIXED(fixed), button, 10,10);
这里写图片描述
最后fixed容器有一个非常有用的功能,可以通过gtk_fixed_move来移动放在容器里的控件。
5.添加菜单
上面说了,窗口是一个只能容纳一个控件的容器,所以需要新建一个纵向的box容器,把菜单放在box的开头,其他内容放在下面
GtkWidget *vbox = gtk_box_new (GTK_ORIENTATION_VERTICAL, 0);
gtk_container_add (GTK_CONTAINER (window), vbox);
GtkWidget *menubar,*menu,*menuitem;
menubar=gtk_menu_bar_new();
gtk_widget_set_hexpand (menubar, TRUE);
gtk_box_pack_start (GTK_BOX (vbox), menubar, FALSE, TRUE, 0);
menuitem=gtk_menu_item_new_with_label("文件");
gtk_menu_shell_append (GTK_MENU_SHELL (menubar), menuitem);
menu=gtk_menu_new();
gtk_menu_item_set_submenu(GTK_MENU_ITEM(menuitem),menu);
menuitem=gtk_menu_item_new_with_label("新建");
gtk_menu_shell_append (GTK_MENU_SHELL (menu), menuitem);
g_signal_connect(GTK_MENU_ITEM(menuitem),"activate",G_CALLBACK(print_hello),NULL);
GtkWidget *fixed = gtk_fixed_new();
gtk_box_pack_start (GTK_BOX (vbox), fixed, TRUE, TRUE, 0);
GtkWidget *button = gtk_button_new_with_label("Button");
gtk_fixed_put(GTK_FIXED(fixed), button, 120,120);
这里写图片描述
6.设置背景图片
有2种方式,一种是把图片直接加载到fix容器里,这时界面会随图片的大小自动调整
GdkPixbuf *pixbuf = gdk_pixbuf_new_from_file("background.jpg", NULL);
GtkWidget *image = gtk_image_new_from_pixbuf(pixbuf);
gtk_fixed_put(GTK_FIXED(fixed), image, 0,0);
另外一种是创建一块画布,把图片画到到画布上,这时超出画布的范围图片将不会显示,画图在回调函数中进行
GdkPixbuf *background;
static gint draw_cb (
GtkWidget *widget,
cairo_t *cr,
gpointer data)
{
gdk_cairo_set_source_pixbuf (cr, background, 0, 0);
cairo_paint (cr);
return TRUE;
}
cr是画笔,在回调函数里把图像赋值给画笔,再由画笔画到画布上
GtkWidget* draw_area = gtk_drawing_area_new();
gtk_widget_set_size_request(draw_area, 200,200);
gtk_fixed_put(GTK_FIXED(fixed), draw_area, 0, 0);
background = gdk_pixbuf_new_from_file("background.jpg", NULL);
g_signal_connect (draw_area, "draw",G_CALLBACK (draw_cb), NULL);
这里写图片描述
这时还可以在别的地方在画布上画画,然后再通过gtk_widget_queue_draw (draw_area)来触发回调函数,对画布进行重绘
7.画一个圆
画布的回调函数里有一支画笔cr,可以用这个画图,但是这是私有的,其他地方不能使用,所以需要创建一个全局surface,这个surface与画布绑定,把图先画在surface上,然后在回调函数里把画布的画笔在surface上画图。注意在其他地方创建的画笔在surface上画图是显示不出来的,只有在回调函数里画图才能显示出来。
另外有一个问题就是画图一定要在gtk_widget_show_all(window);之后,在之前是画不出来的,具体原理还不是很清楚,猜想可能是configure_event事件需要在gtk_widget_show_all(window)之后触发,没有初始化是画不了图的。
cairo_surface_t* surface = NULL;
static gint draw_cb (
GtkWidget *widget,
cairo_t *cr,
gpointer data)
{
cairo_set_source_surface (cr, surface, 0, 0);
cairo_paint (cr);
return TRUE;
}
int configure_draw(GtkWidget* widget, GdkEventConfigure* event) {
GtkAllocation allocation;
if(surface)
{
return 0;
//cairo_surface_destroy(surface);
}
else
{
gtk_widget_get_allocation (widget, &allocation);
surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32,
allocation.width,
allocation.height);
}
return TRUE;
}
g_signal_connect (draw_area, "draw",G_CALLBACK (draw_cb), NULL);
g_signal_connect(draw_area, "configure_event", G_CALLBACK(configure_draw), NULL);
gtk_widget_show_all(window);
cairo_t *cr;
cr = cairo_create (surface);
cairo_set_line_width (cr, 9);
cairo_set_source_rgb (cr, 0.69, 0.19, 0);
cairo_arc (cr, 100, 100,
50, 0,
2 * G_PI);
cairo_stroke(cr);
//先把图画在surface上,此时还不能显示图片,需要在draw_cb里显示
cairo_set_source_surface (cr, surface, 0, 0);
cairo_paint (cr);
gtk_widget_queue_draw (draw_area);
cairo_destroy (cr);
这里写图片描述
8.事件盒子
很多时候我们都需要鼠标点击来触发一个事件,但是除了按钮和窗口外,其他控件并不能绑定鼠标点击的回调函数,所以这时候事件盒子可以作为一个中间层,把需要鼠标响应的控件放在事件盒子里,再把事件盒子放在容器里,这样这个控件就可以响应鼠标点击的事件了
event_box = gtk_event_box_new();
label = gtk_label_new("点击这里,退出");
gtk_container_add(GTK_CONTAINER(event_box),fixed);
g_signal_connect(event_box, "button-press-event", G_CALLBACK(gtk_main_quit), fixed);
gtk_fixed_put(GTK_FIXED(fixed), event_box, 100,100);
9.其他
透明按钮:
gtk_button_set_relief(GTK_BUTTON(button),GTK_RELIEF_NONE);
给按钮设置图片:
gtk_button_set_image(GTK_BUTTON(button), image);
隐藏控件:
gtk_widget_hide
获取父控件:
gtk_widget_get_parent(widget)