Ubuntu 之Glade图形化设计器

最新推荐文章于 2025-04-24 12:39:44 发布

在奋斗的大道

最新推荐文章于 2025-04-24 12:39:44 发布

阅读量1.7k

点赞数 22

分类专栏：我的嵌入式成长之路文章标签： ubuntu linux 运维

本文链接：https://blog.youkuaiyun.com/zhouzhiwengang/article/details/139893033

版权

我的嵌入式成长之路专栏收录该内容

10 篇文章

订阅专栏

演示环境说明：本机使用Windows 11 家庭版本搭载 Ubuntu 22.04.4 LTS 子系统，同时并安装Ubuntu桌面虚拟化软件XLaunch。

如果没有搭建好上述问题，请参考：windows11子系统Ubuntu 22.04.4子安装图形化界面

Glade是什么？

glade是一个RAD（rapid application develop，快速应用开发）工具，能够为gtk+工具包和gnome桌面环境快速而简单地开发用户界面。Glade中设计的用户界面保存为XML，通过使用GtkBuilder GTK +对象，应用程序可以根据需要动态加载这些界面。通过使用GtkBuilder，Glade XML文件可以用于多种编程语言，包括C，C ++，C＃，Vala，Java，Perl，Python等。Glade是根据GNU GPL许可证发布的自由软件。

Ubuntu 快速搭建Glade 开发环境

#安装 devhelp GTK文档查看程序
sudo apt-get install devhelp


#安装 gtk/glib 的API参考手册及其它帮助文档
sudo apt-get install libglib2.0-doc libgtk-3-doc

#安装基于GTK的界面GTK是开发Gnome窗口的c/c++语言图形库
sudo apt-get install glade libgtk-3-dev

Ubuntu 运行Glade

1、打开Ubuntu 系统控制台，输入glade 命令，图形界面软件打开后如下截图所示。

Glade 项目实例

功能要求：设计一个简单的登入窗口页面。

原型设计：

第一步：创建UI项目文件夹

创建一个项目，点击图标
点击保存按钮
弹出一个对话框，创建项目文件夹，点击图标
在顶部名称栏中输入自定义的名称
点击右下角的保存按钮，项目创建完成

第二步：设置用户登入界面窗口

1.在Glade中创建顶层窗口，如图

2.更改窗口ID

我们现在可以选择更改窗口ID。这是将在C代码中引用窗口的名称。在下图中，它从GtkWindow的默认名称更改为window_main。在Glade窗口右侧的“常规”窗格中进行更改。

3.更改默认窗口大小

可以选择更改窗口的默认大小。这将是由C程序创建时窗口的大小。如需自定义窗口大小，如下图，下图显示窗口大小已更改为640像素宽x 480像素高。

4.将回调函数连接到destroy 信号

当C程序显示当前在glade中设计的窗口时，当窗口关闭时，它将发出destroy 信号。回调函数需要连接到destroy 信号，关闭窗口时，将运行的destroy 信号。

如图，点击“信号”标签，向下滚动，找到GtkWidget ，点击展开项，向下滚动找到destroy。点击<Type here>标签，输入on，软件会给推荐的处理函数名称，选择如图所示的名称，按Enter键确认。

5.更改窗口标题，如图提示操作，输入标题名称

6.保存glade文件，点击右上角按钮

第三步：设置登入界面窗口内元素

1、选择布局控件GtkBox（盒子/水平布局），设置4行并且间隔设置为10 元素。

2、在GtkBox（盒子/水平布局）第一行放置一个普通文本用来显示"标题 "

3、在GtkBox（盒子/水平布局）第二行放置一个GtkGride(表格控件)，设置一行两列

左边放置普通文本设置默认值为"username", 设置默认宽度和高度

右边设置输入文本框，设置ID 为"username", 设置输入框提示语, 设置默认宽度和高度。

4、请重复第三步，将普通文本显示默认值修改为"password",

将输入文本框的ID修完passwd

5、在GtkBox（盒子/水平布局）第四行放置一个GtkGride(表格控件)，设置一行两列。

左边放置普通按钮设置标题为"login", 设置默认宽度和高度, 并设置点击响应事件(on_login_clicked)。

右边放置普通按钮设置标题为"cancel", 设置默认宽度和高度, 并设置点击响应事件(on_cancel_clicked)。

第四步：GTK 程序与Glade 图形化设计页面集成

第一步：创建gtk_demo30.c文件，使用名为his_login.glade的XML文件创建你上面步骤设计的登入窗口。建议：将此文件保存到包含已创建的glade文件的同一目录或文件夹中。代码如下所示：

#include<stdio.h>
#include<gtk-3.0/gtk/gtk.h>

static void on_login_clicked(GtkButton *button, gpointer user_data){

    GtkEntry *username = GTK_ENTRY(gtk_builder_get_object(GTK_BUILDER(user_data), "username"));
    GtkEntry *passwd = GTK_ENTRY(gtk_builder_get_object(GTK_BUILDER(user_data), "passwd"));
    
    const gchar *username_text = gtk_entry_get_text(username);
    const gchar *passwd_text = gtk_entry_get_text(passwd);

    printf("用户输入的用户名:%s, 密码:%s\n",username_text, passwd_text);
    printf("点击按钮触发\n");
} 

static void on_cancel_clicked(GtkButton *button, gpointer user_data){
    printf("取消按钮触发\n");
}


int main(int argc, char *argv[]) {
    GtkBuilder *builder;
    GtkWidget *window;

    GtkWidget *login;
    GtkWidget *cancel;
    GtkWidget *username;
    GtkWidget *passwd;
    
    gtk_init(&argc, &argv); // gtk 初始化

    builder = gtk_builder_new();// 创建新的builder 对象
    gtk_builder_add_from_file(builder, "his_login.glade", NULL);

    // 组件实例化
    window = GTK_WIDGET(gtk_builder_get_object(builder,"window_main")); // gtk 窗口实例化
    login = GTK_WIDGET(gtk_builder_get_object(builder,"login")); //登入按钮实例化
    cancel = GTK_WIDGET(gtk_builder_get_object(builder,"cancel")); //取消按钮实例化
    username = GTK_WIDGET(gtk_builder_get_object(builder,"username")); //账户输入文本框
    passwd = GTK_WIDGET(gtk_builder_get_object(builder,"passwd")); //密码输入文本框

    //组件事件绑定                                 
    g_signal_connect (login, "clicked", G_CALLBACK (on_login_clicked), builder);
    g_signal_connect (cancel, "clicked", G_CALLBACK (on_cancel_clicked), builder);
    gtk_builder_connect_signals(builder, NULL);

    //g_object_unref(builder);
    gtk_widget_show(window); // 显示windows 窗口包含的所有gtk 组件
    
    gtk_main(); //gtk 主事件循环开启
    return 0;

}

总结

1、glade 声明ID和回调函数，必须在*c 文件中必须一一对应上.

2、glade 组件实例化是通过builder 构建器完成，不在是通过gtk 相关组件头文件调用实现。

编译代码,在编译代码之前，请确保已安装GTK+3开发库。在Ubuntu 命令窗口中输入编译命令:

gcc `pkg-config --cflags gtk+-3.0` -o gtk_demo30 gtk_demo30.c `pkg-config --libs gtk+-3.0`

运行应用程序，输入./gtk_demo30，效果如下图:

Glade 项目运行中遇到的问题

第一：绘制完his_login.glade 文件，编写完gtk_demo30.c 执行完编译命令，执行./gtk_demo30 程序，窗口提示：

Gtk-CRITICAL **: gtk_builder_get_object: assertion `GTK_IS_BUILDER (builder)' failed

Google 一下，国外网友给出的解决办法：

以下是原文截图：

解决办法：

大致意思是：移除g_object_unref(G_OBJECT(builder))

原因：由于g_object_unref(G_OBJECT(builder)) 导致无法使用builder构建器访问其他的组件，因此需要被移除。