使用 GTK 创建一个简单的秒表应用程序

介绍

在本项目中，我们将使用 C 语言中的 GTK 库创建一个简单的秒表应用程序。这个秒表将有一个开始/暂停按钮和一个重置按钮来控制秒表定时器。我们将把这个过程分解为几个步骤，从设置项目文件开始，到运行秒表应用程序结束。

👀 预览

🎯 任务

在本项目中，你将学习：

• 如何安装 GTK 库
• 如何创建项目文件
• 如何包含 GTK 头文件并定义变量
• 如何创建定时器回调函数
• 如何实现按钮点击回调
• 如何创建主函数和用户界面元素
• 如何编译和运行项目

🏆 成果

完成本项目后，你将能够：

• 使用 GTK 库在 C 语言中创建图形用户界面
• 在 GTK 中处理按钮点击事件
• 在 GTK 中使用定时器
• 在 GTK 中动态更新标签

创建项目文件

首先，确保你的系统上已安装 GTK 库，如果没有，可以使用以下命令进行安装：

sudo apt update
sudo apt-get install libgtk-3-dev

接下来，创建一个名为 stopwatch.c 的新文件，并在你喜欢的代码编辑器中打开它。

cd ~/project
touch stopwatch.c

包含 GTK 头文件并定义变量

在这一步中，我们将包含必要的 GTK 头文件，并为我们的秒表应用程序定义变量。

#include <gtk/gtk.h>

static guint timer_id = 0;
static gboolean running = FALSE;
static int elapsed_seconds = 0;

static GtkWidget *label;

• #include <gtk/gtk.h>：这包含了用于在程序中使用 GTK 函数和数据结构的 GTK 库头文件。
• static guint timer_id = 0;：这是一个用于存储 GTK 定时器 ID 的变量。定时器 ID 在以下代码中用于控制定时器的启动和停止。
• static gboolean running = FALSE;：这是一个布尔变量，用于跟踪秒表是否正在运行。当秒表运行时，running为TRUE；当秒表暂停时，running为FALSE。
• static int elapsed_seconds = 0;：这是一个整数变量，用于跟踪经过的秒数。它用于计算经过的时间，并在标签上显示秒表时间。
• static GtkWidget *label;：这是一个指针，用于存储 GTK 标签小部件。这个标签显示秒表的时间。

创建定时器回调函数

接下来，我们将创建一个回调函数，每秒更新一次秒表定时器。

static gboolean timer_callback(gpointer data) {
    if (running) {
        elapsed_seconds++;
        int minutes = elapsed_seconds / 60;
        int seconds = elapsed_seconds % 60;
        char time_str[10];
        snprintf(time_str, sizeof(time_str), "%02d:%02d", minutes, seconds);
        gtk_label_set_text(GTK_LABEL(label), time_str);
    }
    return G_SOURCE_CONTINUE;
}

• elapsed_seconds++：如果秒表正在运行，elapsed_seconds变量的值会增加，表示经过的秒数增加了 1 秒。
• 由于 1 分钟等于 60 秒，我们将elapsed_seconds除以 60 得到分钟数。小于 1 分钟的秒数可以通过取余运算符%获得。
• 使用snprintf函数将分钟和秒格式化为mm:ss格式的字符串，其中%02d表示分钟和秒都占两位，不足两位则用前导零填充。
• gtk_label_set_text将刚生成的时间字符串设置为标签部件的文本，以更新秒表显示。
• return G_SOURCE_CONTINUE告诉 GTK 定时器在回调完成后继续定时器，以便再次触发下一个定时器事件。如果回调返回G_SOURCE_REMOVE，定时器将停止。

总之，timer_callback函数负责在秒表运行时通过增加经过的秒数来动态更新秒表时间，将分钟和秒格式化为字符串，然后将其设置为标签部件的文本。

实现按钮点击回调函数

我们需要为开始/暂停按钮和重置按钮设置回调函数。

static void start_stop_button_clicked(GtkButton *button, gpointer data) {
    running =!running;
    if (running) {
        gtk_button_set_label(button, "Pause");
    } else {
        gtk_button_set_label(button, "Start");
    }
}

static void reset_button_clicked(GtkButton *button, gpointer data) {
    elapsed_seconds = 0;
    gtk_label_set_text(GTK_LABEL(label), "00:00");
}

• start_stop_button_clicked 在运行和暂停之间切换秒表状态。
• reset_button_clicked 重置秒表定时器。

创建主函数和用户界面元素

现在，让我们创建main函数并设置用户界面。

int main(int argc, char *argv[]) {
    GtkWidget *window;
    GtkWidget *grid;
    GtkWidget *start_stop_button;
    GtkWidget *reset_button;

    gtk_init(&argc, &argv); // 初始化 GTK

    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window), "Stopwatch"); // 设置窗口标题
    gtk_window_set_default_size(GTK_WINDOW(window), 200, 200); // 设置默认窗口大小
    g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL); // 连接窗口关闭事件

    grid = gtk_grid_new(); // 创建一个网格布局
    gtk_container_add(GTK_CONTAINER(window), grid); // 将网格添加到窗口

    label = gtk_label_new("00:00"); // 创建一个最初显示“00:00”的 GTK 标签
    gtk_widget_set_hexpand(label, TRUE); // 允许标签水平扩展
    gtk_widget_set_vexpand(label, TRUE); // 允许标签垂直扩展
    gtk_grid_attach(GTK_GRID(grid), label, 0, 0, 1, 1); // 将标签添加到网格

    start_stop_button = gtk_button_new_with_label("Start"); // 创建一个标签为“Start”的按钮
    gtk_widget_set_hexpand(start_stop_button, TRUE); // 允许按钮水平扩展
    gtk_widget_set_vexpand(start_stop_button, TRUE); // 允许按钮垂直扩展
    g_signal_connect(G_OBJECT(start_stop_button), "clicked", G_CALLBACK(start_stop_button_clicked), NULL); // 连接按钮点击事件
    gtk_grid_attach(GTK_GRID(grid), start_stop_button, 0, 1, 1, 1); // 将按钮添加到网格

    reset_button = gtk_button_new_with_label("Reset"); // 创建一个标签为“Reset”的按钮
    gtk_widget_set_hexpand(reset_button, TRUE); // 允许按钮水平扩展
    gtk_widget_set_vexpand(reset_button, TRUE); // 允许按钮垂直扩展
    g_signal_connect(G_OBJECT(reset_button), "clicked", G_CALLBACK(reset_button_clicked), NULL); // 连接按钮点击事件
    gtk_grid_attach(GTK_GRID(grid), reset_button, 0, 2, 1, 1); // 将按钮添加到网格

    gtk_widget_show_all(window); // 显示窗口及其所有子部件

    timer_id = g_timeout_add(1000, timer_callback, NULL); // 创建一个每 1000 毫秒（1 秒）触发一次并调用 timer_callback 的定时器

    gtk_main(); // 启动 GTK 主事件循环

    return 0;
}

• main函数设置 GTK 窗口、标签、按钮及其点击事件处理程序。

编译并运行项目

既然我们已经创建了秒表应用程序，那就来编译并运行它。

1. 打开终端并导航到项目目录。

cd ~/project

2. 使用以下命令编译代码：

gcc -o stopwatch stopwatch.c $(pkg-config --cflags --libs gtk+-3.0)

3. 运行应用程序：

./stopwatch

你应该会看到一个带有秒表的窗口。点击“开始”按钮开始计时，“暂停”按钮暂停计时，“重置”按钮重置计时。

总结

在这个项目中，我们使用 C 语言中的 GTK 库创建了一个简单的秒表应用程序。我们设置了项目文件，定义了变量，实现了定时器回调函数，并创建了按钮点击回调。该应用程序允许你启动、暂停和重置秒表定时器，你可以通过编译代码并执行生成的程序来运行它。