​搭建好环境​​后,在终端敲 glade 即可启动glade工具。


glade的整体框图:


GTK入门学习:glade的使用_GTK




常用控件选择区:列举了常用的控件,常用的有三类:顶层(主窗口等),容器(各种布局容器等),控制和显示(按钮、便签、图片控件等)

当鼠标放在控件时,会自动显示控件的中文文字,同时,还能人为设置,如下图:



GTK入门学习:glade的使用_glade_02






GTK入门学习:glade的使用_控件_03






界面编辑区:把控件拖放在这进行进行相应的布局






控件监视区:能够看到界面上所有的控件,同时,选中这个控件,可以看到这个控件的具体类型



GTK入门学习:glade的使用_一步一步学习GTK+_04






属性编辑区:编辑选中控件的常用属性,如窗口设置标题、窗口类型、屏幕上显示位置等。

工具栏:常用的有以下几个按钮



新建:新建一个glade文件
打开:打开一个已经存在的glade文件
保存:保存一个glade文件
选择:按了这个按钮, 才能选择控件
拖拽调整大小:按了这个按钮,才能移动控件的位置,改变控件的大小



GTK入门学习:glade的使用_一步一步学习GTK+_05









现在开始学习Glade的操作。
选择控件时,一定要先按工具栏的“选择”按钮
操作时,支持撤销(Ctrl+z)和恢复(Ctrl+y)等window的快捷键






操作的流程和布局的过程是一致的:
1)选择主窗口,根据需要设置窗口的相应属性
2)选择布局容器
3)根据需要选择相应的控件,根据需要设置控件的相应属性






第一步:选择主窗口,根据需要设置窗口的相应属性



1)选择窗口



GTK入门学习:glade的使用_GTK_06

GTK入门学习:glade的使用_控件_07




2)设置窗口标题:我们一起学习Glade;固定窗口大小;设置窗口位置:中心


GTK入门学习:glade的使用_glade_08




3)设置窗口的宽度和高度


GTK入门学习:glade的使用_GTK入门学习_09






第二步:选择布局容器(固定布局能允许用户任意布局,所以我们选择此布局)


GTK入门学习:glade的使用_GTK入门学习_10




GTK入门学习:glade的使用_glade_11




第三步:根据需要选择相应的控件,根据需要设置控件的相应属性(每个控件的设置方法都差不多,这里以“按钮”为例)


1)选择两个按钮


GTK入门学习:glade的使用_控件_12


GTK入门学习:glade的使用_控件_13


GTK入门学习:glade的使用_GTK_14




2)调整按钮的位置以及其大小(有两种方法可以设置)
A)在界面编辑区里通过拖拽方式进行调整


GTK入门学习:glade的使用_控件_15




B)通过属性编辑区进行设置(先设置起点坐标,再设置其宽度和高度)

a) 设置控件的起点坐标

GTK入门学习:glade的使用_GTK入门学习_16


b)设置控件的宽度和高度

GTK入门学习:glade的使用_GTK_17

GTK入门学习:glade的使用_GTK_18


4)设置按钮的属性

A)第一个按钮作为带文本内容的普通按钮

GTK入门学习:glade的使用_glade_19

GTK入门学习:glade的使用_glade_20


B)第二按钮为没边框的按钮
按钮去边框

GTK入门学习:glade的使用_glade_21

GTK入门学习:glade的使用_控件_22






其它控件的操作方法也是差不多的,这里就不一一列举。



在代码操作时,我们需要关心的是,如何通过代码获得这个界面的控件,如本例子中的(主窗口,按钮),而在界面里,每个控件都有一个标识名称,这个标识名称就是在控件监视区的名字,我们代码里就通过这个标识名称来获取界面里的控件:

GTK入门学习:glade的使用_一步一步学习GTK+_23



这个标识名称是可以修改的,如下图

GTK入门学习:glade的使用_一步一步学习GTK+_24


GTK入门学习:glade的使用_一步一步学习GTK+_25

到这里,我们的界面就已经设置好了(一个主窗口里放了一个固定布局,布局里还放了2个按钮),保存这个界面即可使用,保存的时候选择合适路径以默认方式保存即可,文件的后缀名可以任意,为了易于辨别文件,我们最好以 .glade 后缀,这里保存为test.glade。




代码操作

可以简单分为两步:

1)读取glade文件




// 创建GtkBuilder对象,GtkBuilder在<gtk/gtk.h>声明





GtkBuilder *builder = gtk_builder_new(); 




// 读取test.glade文件的信息,保存在builder指针变量里



gtk_builder_add_from_file(builder, "./test.glade", NULL);




2)获取glade文件里的控件



// 获取窗口控件指针,注意"window1" 要和glade里的标志名称匹配



GtkWidget *window = GTK_WIDGET(gtk_builder_get_object (builder, "window1"));  




完整代码如下:

#include <gtk/gtk.h>

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

// 创建GtkBuilder对象, GtkBuilder在<gtk/gtk.h>声明
GtkBuilder *builder = gtk_builder_new();

// 读取test.glade文件的信息,保存在builder指针变量里,返回值不为空代表读取成功
if( !gtk_builder_add_from_file(builder, "./test.glade", NULL) ){
printf("cannot load file!");
}

// 获取窗口控件指针,注意"window1" 要和glade里的标志名称匹配
GtkWidget *window = GTK_WIDGET(gtk_builder_get_object (builder, "window1"));

gtk_widget_show_all(window);

gtk_main();

return 0;
}


运行效果图如下:


GTK入门学习:glade的使用_一步一步学习GTK+_26


通过上面的例子,利用 glade 工具, 我们可以通过拖放控件的方式快速设计出用户界面,可以很直观地进行相应的布局。但是,如果我们要想实现更多的功能,如给窗口设置背景图,让按钮做相应操作,我们还得通过代码实现。glade只是辅助我们设计窗口,它不是万能的。