Ubuntu16下GTK+2转GTK+3：按钮标签标记及CSS样式示例求助

原因分析 #

你遇到的报错是因为GTK+3的API做了重大调整：GtkButton不再继承GtkBin类，所以GTK_BIN(button)->child这种直接访问成员的写法在GTK+3里完全失效了——GtkBin的child成员根本不存在于GtkButton的结构里。另外，GTK+3也为GtkButton提供了更直接的Markup设置方法，不需要再手动获取子标签。

替代实现方法 #

有两种常用的方式来实现需求：

方法1：直接使用gtk_button_set_markup()（推荐） #

GTK+3专门为GtkButton添加了这个便捷函数，一步到位设置带Markup的标签，不需要再操作子部件：

#include <gtk/gtk.h>

int main(int argc, char *argv[]) {
    gtk_init(&argc, &argv);
    
    GtkWidget *window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    GtkWidget *button = gtk_button_new();
    
    // 直接设置带Markup的按钮文本
    gtk_button_set_markup(GTK_BUTTON(button), "<b>加粗按钮</b> <i>斜体部分</i>");
    
    gtk_container_add(GTK_CONTAINER(window), button);
    gtk_widget_show_all(window);
    
    g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
    gtk_main();
    return 0;
}

方法2：获取按钮的标签部件后设置Markup #

如果你需要更灵活地控制标签（比如动态修改已存在的标签），可以用gtk_button_get_label_widget()获取标签部件，再调用GtkLabel的相关方法：

GtkWidget *label = gtk_button_get_label_widget(GTK_BUTTON(button));
if (label != NULL && GTK_IS_LABEL(label)) {
    // 启用Markup并设置内容
    gtk_label_set_markup(GTK_LABEL(label), "<span color='red'>红色文本按钮</span>");
}

下面是一个完整的、可编译运行的示例，展示如何给窗口、按钮、标签等部件设置自定义CSS样式：

完整代码示例 #

#include <gtk/gtk.h>

static void load_css() {
    GtkCssProvider *provider = gtk_css_provider_new();
    // 定义CSS样式
    const gchar *css_data = 
        "window {"
        "   background-color: #f0f0f0;"
        "}"
        "button {"
        "   background-color: #4285f4;"
        "   color: white;"
        "   font-size: 16px;"
        "   padding: 10px 20px;"
        "   border-radius: 5px;"
        "   border: none;"
        "}"
        "button:hover {"
        "   background-color: #3367d6;"
        "}"
        "button:active {"
        "   background-color: #2c56b4;"
        "}"
        "label {"
        "   font-size: 18px;"
        "   color: #333333;"
        "   margin: 20px;"
        "}";
    
    // 加载CSS字符串
    gtk_css_provider_load_from_data(provider, css_data, -1, NULL);
    // 将样式应用到所有屏幕
    gtk_style_context_add_provider_for_screen(gdk_screen_get_default(),
                                              GTK_STYLE_PROVIDER(provider),
                                              GTK_STYLE_PROVIDER_PRIORITY_USER);
    
    g_object_unref(provider);
}

int main(int argc, char *argv[]) {
    gtk_init(&argc, &argv);
    
    // 加载自定义CSS
    load_css();
    
    // 创建主窗口
    GtkWidget *window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window), "GTK+3 CSS样式示例");
    gtk_window_set_default_size(GTK_WINDOW(window), 400, 300);
    
    // 创建垂直布局容器
    GtkWidget *box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 10);
    gtk_container_add(GTK_CONTAINER(window), box);
    
    // 创建标签和按钮
    GtkWidget *label = gtk_label_new("这是一个带样式的标签");
    GtkWidget *button = gtk_button_new_with_label("点击我");
    
    gtk_box_pack_start(GTK_BOX(box), label, TRUE, TRUE, 0);
    gtk_box_pack_start(GTK_BOX(box), button, FALSE, FALSE, 0);
    
    // 显示所有部件
    gtk_widget_show_all(window);
    
    // 窗口关闭信号
    g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
    
    gtk_main();
    return 0;
}

编译与运行 #

用GCC编译时需要链接GTK+3库：

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

运行生成的可执行文件即可看到自定义样式的界面。

代码说明 #

• load_css()函数负责创建CSS提供者、加载样式数据，并将样式应用到全局屏幕；
• CSS语法和网页CSS类似，可以针对部件类型、类名甚至ID设置样式；
• GTK_STYLE_PROVIDER_PRIORITY_USER确保自定义样式优先级高于系统默认样式。

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