如何在GtkDrawingArea上添加按钮？GTK+2.0与SDL2场景求助

你遇到的问题核心是GtkDrawingArea的绘制层级高于按钮，或是SDL直接渲染到了整个GTK窗口表面，导致按钮被覆盖。解决的关键是让SDL仅渲染到GtkDrawingArea的区域，同时确保按钮在GtkFixed的Z轴顺序中处于上层。

以下是完整的可运行示例代码：

#include <gtk/gtk.h>
#include <SDL2/SDL.h>

SDL_Window *sdl_window = NULL;
SDL_Renderer *sdl_renderer = NULL;
GtkWidget *drawing_area = NULL;

// SDL定时渲染回调，更新绘图区域内容
gboolean sdl_render_callback(gpointer data) {
    // 清空渲染背景
    SDL_SetRenderDrawColor(sdl_renderer, 100, 150, 200, 255);
    SDL_RenderClear(sdl_renderer);

    // 绘制SDL示例图形（红色矩形）
    SDL_Rect rect = {50, 50, 100, 100};
    SDL_SetRenderDrawColor(sdl_renderer, 255, 0, 0, 255);
    SDL_RenderFillRect(sdl_renderer, &rect);

    // 提交渲染内容到屏幕
    SDL_RenderPresent(sdl_renderer);

    // 持续触发回调（每16ms约60帧）
    return G_SOURCE_CONTINUE;
}

// 按钮点击事件处理
void on_button_clicked(GtkWidget *widget, gpointer data) {
    g_print("按钮被点击了！\n");
}

// 窗口关闭时清理资源
void on_window_destroy(GtkWidget *widget, gpointer data) {
    SDL_DestroyRenderer(sdl_renderer);
    SDL_DestroyWindow(sdl_window);
    SDL_Quit();
    gtk_main_quit();
}

int main(int argc, char *argv[]) {
    // 初始化GTK
    gtk_init(&argc, &argv);

    // 初始化SDL视频子系统
    if (SDL_Init(SDL_INIT_VIDEO) != 0) {
        g_print("SDL初始化失败: %s\n", SDL_GetError());
        return 1;
    }

    // 创建主窗口
    GtkWidget *window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_default_size(GTK_WINDOW(window), 400, 300);
    gtk_window_set_title(GTK_WINDOW(window), "GTK+2.0 + SDL2 示例");
    g_signal_connect(window, "destroy", G_CALLBACK(on_window_destroy), NULL);

    // 创建GtkFixed布局容器
    GtkWidget *fixed_container = gtk_fixed_new();
    gtk_container_add(GTK_CONTAINER(window), fixed_container);

    // 创建绘图区域并添加到容器（先添加，Z轴靠后）
    drawing_area = gtk_drawing_area_new();
    gtk_widget_set_size_request(drawing_area, 300, 200);
    gtk_fixed_put(GTK_FIXED(fixed_container), drawing_area, 50, 20);

    // 创建按钮并添加到容器（后添加，Z轴靠前，覆盖在绘图区域上方）
    GtkWidget *button = gtk_button_new_with_label("点击我");
    gtk_widget_set_size_request(button, 100, 30);
    gtk_fixed_put(GTK_FIXED(fixed_container), button, 150, 100);
    g_signal_connect(button, "clicked", G_CALLBACK(on_button_clicked), NULL);

    // 显示所有控件
    gtk_widget_show_all(window);

    // 获取绘图区域的X11窗口ID，用于绑定SDL
    GdkWindow *gdk_window = gtk_widget_get_window(drawing_area);
    if (!gdk_window) {
        g_print("无法获取绘图区域的GdkWindow\n");
        return 1;
    }
    Window xid = gdk_x11_window_get_xid(gdk_window);

    // 基于现有XID创建SDL窗口，仅渲染到绘图区域
    sdl_window = SDL_CreateWindowFrom((void *)xid);
    if (!sdl_window) {
        g_print("SDL创建窗口失败: %s\n", SDL_GetError());
        return 1;
    }

    // 创建SDL硬件加速渲染器
    sdl_renderer = SDL_CreateRenderer(sdl_window, -1, SDL_RENDERER_ACCELERATED);
    if (!sdl_renderer) {
        g_print("SDL创建渲染器失败: %s\n", SDL_GetError());
        return 1;
    }

    // 启动定时渲染任务
    g_timeout_add(16, sdl_render_callback, NULL);

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

    return 0;
}

编译命令 #

gcc -o gtk_sdl_example gtk_sdl_example.c `pkg-config --cflags --libs gtk+-2.0 sdl2`

核心关键点说明 #

• Z轴顺序控制：GtkFixed中，先添加的控件会被后添加的控件覆盖。因此先添加绘图区域，再添加按钮，确保按钮处于视觉上层。
• SDL绑定绘图区域：通过SDL_CreateWindowFrom()将SDL窗口绑定到GtkDrawingArea的XID，限制SDL仅渲染到指定区域，不会干扰其他UI控件。
• 事件分离处理：GTK主循环负责所有UI事件（如按钮点击），SDL仅负责定时渲染绘图区域内容，避免两者的渲染逻辑冲突。

内容的提问来源于stack exchange，提问作者Codesynth