开始使用 GTK+

• 下载源代码 - 1 KB

引言

我不是 GTK+ 专家，而是初学者。到目前为止，我对其印象深刻。如果一周前你告诉我，我能写一个包含大量可调整大小的控件的 25 行原型程序，并且所有控件都能正确调整大小，我一定会认为你疯了。

在本文中，我将展示我如何

• 下载并测试了 gtkmm 库
• 编写了一个链接到 gtkmm 库的空程序
• 下载、安装并使用了一个名为 Glade 的程序，该程序可用于设计 GTK+ 界面
• 使用 Glade 设计了一个 UI
• 创建了一个令人印象深刻的短程序，该程序原型化了一个用户界面
• 添加了代码，使程序可以通过菜单退出，而不仅仅是通过“X”按钮

背景

我听过和读过很多关于 GTK+ 的信息，并有兴趣将其用于我编写的程序。我听到过关于 GTK+ 的不同说法，有些人喜欢它，有些人提到它在调整窗口大小时会闪烁。毋庸置疑，最好的方法是自己编译并检查它。本文记录了我的经验，我希望也能帮助你做到这一点。使用这种方法，我发现调整窗口大小时没有闪烁问题。（即使在我的虚拟机上，GTK-demo 也运行良好！）

遵循本教程的先决条件

我创建了一篇 Code Project 文章，详细介绍了我是如何设置我用于编译 C++ 程序的工具链的。地址是 开源工具。

下载并测试了 gtkmm 库

我使用的是 gtkmm 而不是 GTK+。gtkmm 是 GTK 和 GTK+ 以及其安装附带的其他必需库的 C++ 包装器。

我从 http://ftp.gnome.org/pub/GNOME/binaries/win32/gtkmm/2.16/ 下载了 Windows 安装程序（我使用的是 *gtkmm-win32-devel-2.16.0-3.exe*）。

我使用以下选项运行了安装程序

• 用户：使用此计算机的任何人
• 目标文件夹：*c:\code\gtkmm*
• 安装类型：完整

如果您选择不同的目标文件夹，我建议选择一个不包含空格的文件夹。这使得链接等操作更容易。

接下来，我将 gtkmm 的 bin 目录添加到路径中。要做到这一点，请转到“控制面板”->“系统”->“高级”->“环境变量”。在“系统变量”部分，找到“Path”变量并单击“编辑”。在末尾添加 *C:\code\gtkmm\bin* 目录（地址之间用 ; 分隔）。

注意：不要用“'”将路径括起来。这会导致 *make* 找不到目录（尽管普通 shell 可以）。

最后，在测试之前，您无法确定是否一切正常。要测试这一点，请单击蓝色的 m 并输入命令 gtk-demo（您可以转到“开始”->“运行”->“cmd”并使用 Windows 命令 shell，它仍然有效。我只是更喜欢 MSYS。）gtk-demo 程序非常有趣，因为它展示了您可以使用 GTK+ 实现的功能。

另一个重要的测试是在命令行中键入以下命令：*pkg-config --cflags gtk+-2.0*（如果您使用的是 MSYS，可以复制此命令并使用 Shift + Insert 粘贴到 MSYS 中）。

注意：如果您想了解更多关于 GTK+ 的信息，网站是 https://gtk.org.cn。

注意：如果您想了解更多关于 gtkmm 的信息，网站是 http://www.gtkmm.org/download.shtml。

编写一个链接到 GTK+ 库的空程序

我经常在编译和链接新库时遇到困难。我发现使用一个空程序更容易解决这些问题。为此，我遵循了以下步骤

为我们的 GTK hello world 应用程序创建一个目录（在 MSYS 中运行这些命令）

• cd /c/code/
• mkdir gtk_hello_world

创建 C++ 程序

• "/c/program files/notepad++/notepad++.exe" /c/code/gtk_hello_world/main.cpp
• 粘贴以下代码，然后保存并关闭 Notepad++

//main.cc
#include <gtkmm/main.h>
#include <gtkmm/menu.h>
#include <libglademm.h>
#include <gtkmm/window.h>
#include <gtkmm/button.h>

int main( int argc, char *argv[] )
{
    printf("gtk_hello_world start\n");
    printf("gtk_hello_world end\n");
    return 0;
}

不要忘记在文件末尾添加换行符，并确保“<”和“>”被正确复制。

创建 Makefile

• "/c/program files/notepad++/notepad++.exe" /c/code/gtk_hello_world/makefile
• 粘贴以下代码，然后保存并关闭 Notepad++

$(warning Starting Makefile)

CXX=g++

main.exe: main.cpp
    $(CXX) main.cpp -o main.exe `pkg-config gtkmm-2.4 libglademm-2.4 --cflags --libs`

clean: 
    -rm main.exe

当你在 Notepad++ 中打开 *main.cpp* 或 makefile 时，点击“运行”->“RUN_CODE”。这将编译并运行程序，您应该会看到 gtk_hello_world 启动，并在屏幕上显示 gtk_hello_world 结束。

下载、安装并使用一个名为 Glade 的程序，该程序可用于设计 GTK+ 界面

当我第一次接触 GTK+ 并走到这一步时，我埋头编写代码来创建窗口和控件（在 GTK+ 中，按钮、控件等被称为控件）。在学习了几天之后，我发现了一篇描述 Glade 和使用它来设计 GTK+ 用户界面的文章。这是一种更好的开发应用程序的方式，我真希望我一开始就找到了那篇文章。知道如何用代码创建控件仍然很有用，因为这有助于在程序运行时动态创建。当您开发应用程序时，大多数窗口设计都是静态的，您可以使用 Glade 来完成设计工作，而无需编写大量的代码。

Glade 是一个 UI 设计器程序，而不是一个完整的 IDE。您可以使用它来创建用户界面并将其保存为 XML 文件。然后，您编写一个使用 libglade 加载 XML 文件并创建所有控件等的程序。

当我尝试这个时，Glade 网站的下载链接坏了（http://glade.gnome.org/download.html）。我最终找到了一个正确的链接，并从 http://sourceforge.net/project/showfiles.php?group_id=98754&package_id=105780 下载了 *glade-3.4.3-win32-1.zip*。

Windows 可以解压缩，但我使用了一个名为 7-zip 的程序来完成此操作。我将文件放在了 *C:\Program Files\glade\* 目录中。

在桌面上或容易访问的地方创建一个指向 *C:\Program Files\glade\bin\glade-3.exe* 的快捷方式。

注意：如果您想了解更多关于 Glade 的信息，网站是 http://glade.gnome.org/。

使用 Glade 设计 UI

现在，您可以使用快捷方式运行 Glade。设计 UI 并非简单地拖放按钮和文本框，因为 GTK 使用一种称为“打包”的概念，所以我将介绍一些创建 UI 的操作。我已将此 XML 文件添加到文章中，但我建议您亲自完成这些步骤并创建它。

• 在“顶级窗口”（Top-levels）下，单击第一个图标（窗口 - Window） - 这将创建一个窗口。
• 在“容器”（Containers）下，单击第二个图标（垂直框 - Vertical Box），然后单击窗口内部。在“项目数量”（number of items）下，输入 4。
• 在“容器”（Containers）下，单击第七个图标（菜单栏 - Menu Bar），然后单击刚刚出现的顶部区域。
• 在“容器”（Containers）下，第八个图标是工具栏（Tool Bar）。单击一次，然后在第二个区域单击。
• 在“控件和显示”（Control and Display）下的第二十五个图标是状态栏（status bar）。将其放在窗口的底部区域。
• 在“容器”（Containers）下的第四个图标是笔记本（Notebook）。将其放在剩余的区域，包含一页。（它会添加三页，但您可以右键单击并删除其中两页）。
• 最后，添加一个文本视图（控件和显示 - Control and Display，第十四个图标）。

现在，我们已经设置好了控件，并且需要命名其中一些控件以便访问它们。通常，您会命名所有控件；我只介绍我示例中需要使用的控件。

• 选择主窗口（可能称为 `window1`）并将其命名为 `main_window`。
• 仍在 `window1` 下，将默认宽度设置为 400，默认高度设置为 250。
• 我们需要命名退出菜单项。您可以通过单击文件菜单来访问它，然后会出现一个弹出菜单。单击“退出”（Quit）将其选中，并将其命名为 `menu_file_quit`。

现在您已经完成，可以保存 XML 文件了。将其保存为 *c:\code\gtk_hello_world\ui.glade*。然后退出 Glade。

注意：我已将 ui.glade 放入本文的 zip 文件中。如果您愿意，可以跳过此步骤，直接将其复制到 *c:\code\gtk_hello_world\ui.glade*。

创建一个令人印象深刻的短程序，该程序原型化了一个用户界面

Glade 以前会为您生成源代码进行编译，但现在不再这样了。当前的方法是导出 XML 文件（在本例中为 ui.glade），然后您使用 libglade 来创建 UI。

修改 C++ 文件，使其如下所示

• "/c/program files/notepad++/notepad++.exe" /c/code/gtk_hello_world/main.cpp
• 粘贴以下代码，然后保存并关闭 Notepad++

//main.cc
#include <gtkmm/main.h>
#include <gtkmm/menu.h>
#include <libglademm.h>
#include <gtkmm/window.h>
#include <gtkmm/button.h>

int main( int argc, char *argv[] )
{
    printf("gtk_hello_world start\n");
    
    Gtk::Window* pMainWindow = 0;
    Gtk::Main kit( argc, argv );
    Glib::RefPtr refXml = Gnome::Glade::Xml::create("ui.glade");
    refXml->get_widget("main_window", pMainWindow);
    if (0==pMainWindow) {
        printf("Couldn't find main window in ui.glade\nExiting\n");
        return 0;
    };
     Gtk::Main::run (*pMainWindow);
    
    printf("gtk_hello_world end\n");
    return 0;
}

不要忘记在文件末尾添加换行符，并确保“<”和“>”被正确复制。

哇，我们现在有了一个大约 25 行代码的程序，它包含了多标签文本编辑器的所有组件。它还能完美调整大小，并且我们可以在不重新编译的情况下重新设计 UI！GTK+ 使用打包容器，这正是我们在设计 UI 时所做的；这消除了编写任何处理大小调整的代码的需要。

添加代码，使程序可以通过菜单退出，而不仅仅是通过“X”按钮

我将展示一个简单的扩展，说明如何编写代码来处理退出菜单项，使其能够退出。

在 C++ 文件中，将以下函数添加到 includes 之后、main 函数之前

void on_quit_clicked()
{
    gtk_main_quit ();
}

然后，将 C++ 程序的 main 函数更改为与以下内容匹配

printf("gtk_hello_world start\n");

Gtk::Main kit( argc, argv );
Glib::RefPtr refXml = Gnome::Glade::Xml::create("ui.glade");

Gtk::Window* pMainWindow = 0;
refXml->get_widget("main_window", pMainWindow);
if (0==pMainWindow) {
    printf("Couldn't find main window in ui.glade\nExiting\n");
    return 0;
};

Gtk::ImageMenuItem* pMenuQuit = 0;
refXml->get_widget("menu_file_quit", pMenuQuit);
if (0==pMainWindow) {
    printf("Couldn't find menu_item_quit in ui.glade\nExiting\n");
    return 0;
};
pMenuQuit->signal_activate().connect(sigc::ptr_fun(&on_quit_clicked));

Gtk::Main::run (*pMainWindow);

printf("gtk_hello_world end\n");
return 0;

我还将此版本的 *main.cpp* 包含在本文的 zip 文件中。

请注意，代码会查找我们在 Glade 中定义的对象的指针。还要注意 connect 函数，它将一个信号连接到我们编写的一个过程。

如果您编译并运行此程序（Run->RUN_CODE），您将看到程序运行，并且退出菜单能够正常工作。

关注点

将 Glide 和 GTK+ 结合使用似乎是一种非常快速的应用程序开发方法。使用本文中包含的代码，您可以使您创建的 UI 运行得近乎流畅。将 UI 对象连接到函数似乎非常简单。这对我来说非常强大，我将深入研究并使用它来创建应用程序。

反馈

本文的目的是为想要了解 GTK+ 的人们节省时间。我希望我达到了这个目标；如果您遵循了这些步骤并遇到了问题，欢迎反馈，因为我可能会改进这篇文章。

GTK+ 有替代品。QI 浮现在脑海中。我希望在某个时候写一篇关于它的文章。

历史

• 2009 年 6 月 13 日 - 首个版本。