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

CCBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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

👀 预览

秒表应用演示

🎯 任务

在本项目中,你将学习:

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

🏆 成果

完成本项目后,你将能够:

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL c(("`C`")) -.-> c/BasicsGroup(["`Basics`"]) c(("`C`")) -.-> c/ControlFlowGroup(["`Control Flow`"]) c(("`C`")) -.-> c/PointersandMemoryGroup(["`Pointers and Memory`"]) c(("`C`")) -.-> c/FunctionsGroup(["`Functions`"]) c(("`C`")) -.-> c/FileHandlingGroup(["`File Handling`"]) c(("`C`")) -.-> c/UserInteractionGroup(["`User Interaction`"]) c/BasicsGroup -.-> c/variables("`Variables`") c/BasicsGroup -.-> c/data_types("`Data Types`") c/BasicsGroup -.-> c/operators("`Operators`") c/ControlFlowGroup -.-> c/if_else("`If...Else`") c/PointersandMemoryGroup -.-> c/pointers("`Pointers`") c/FunctionsGroup -.-> c/function_declaration("`Function Declaration`") c/FunctionsGroup -.-> c/function_parameters("`Function Parameters`") c/FileHandlingGroup -.-> c/create_files("`Create Files`") c/UserInteractionGroup -.-> c/output("`Output`") subgraph Lab Skills c/variables -.-> lab-298824{{"`使用GTK创建一个简单的秒表应用程序`"}} c/data_types -.-> lab-298824{{"`使用GTK创建一个简单的秒表应用程序`"}} c/operators -.-> lab-298824{{"`使用GTK创建一个简单的秒表应用程序`"}} c/if_else -.-> lab-298824{{"`使用GTK创建一个简单的秒表应用程序`"}} c/pointers -.-> lab-298824{{"`使用GTK创建一个简单的秒表应用程序`"}} c/function_declaration -.-> lab-298824{{"`使用GTK创建一个简单的秒表应用程序`"}} c/function_parameters -.-> lab-298824{{"`使用GTK创建一个简单的秒表应用程序`"}} c/create_files -.-> lab-298824{{"`使用GTK创建一个简单的秒表应用程序`"}} c/output -.-> lab-298824{{"`使用GTK创建一个简单的秒表应用程序`"}} end

创建项目文件

首先,确保你的系统上已安装 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;:这是一个布尔变量,用于跟踪秒表是否正在运行。当秒表运行时,runningTRUE;当秒表暂停时,runningFALSE
  • 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
  1. 使用以下命令编译代码:
gcc -o stopwatch stopwatch.c $(pkg-config --cflags --libs gtk+-3.0)
  1. 运行应用程序:
./stopwatch

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

秒表应用演示
✨ 查看解决方案并练习

总结

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

您可能感兴趣的其他 C 教程