GTK4 C语言开发中CSS样式未生效问题排查

问题描述 #

我正在使用C语言开发GTK4 GUI程序，尝试为两个按钮添加颜色。已实现加载CSS并设置按钮CSS类名的逻辑，但样式未生效，界面仅显示白色背景与白色按钮。

相关代码 #

C语言代码：

#include <gtk/gtk.h>

static void on_active(GtkApplication *app){
    // Create a new window and grid
    GtkWidget *s_window = gtk_application_window_new (app);
    gtk_window_set_default_size (GTK_WINDOW (s_window), 800, 800);
    GtkWidget *s_grid   = gtk_grid_new();

    gtk_grid_set_column_spacing(GTK_GRID(s_grid), 15);
    gtk_grid_set_row_spacing(GTK_GRID(s_grid), 15);
    gtk_widget_set_halign (s_grid, GTK_ALIGN_CENTER);
    gtk_widget_set_valign (s_grid, GTK_ALIGN_CENTER);
    gtk_widget_set_hexpand (s_grid, TRUE);

    // Create provider for styling
    GtkCssProvider *cssProvider = gtk_css_provider_new();
    gtk_css_provider_load_from_file(cssProvider, g_file_new_for_path ("styles.css"));
    gtk_style_context_add_provider_for_display(gdk_display_get_default(), GTK_STYLE_PROVIDER(cssProvider), 
                                            GTK_STYLE_PROVIDER_PRIORITY_USER);
    gtk_widget_set_visible(GTK_WIDGET(s_window), TRUE);

    // Create label
    GtkWidget *label  = gtk_label_new("Hello World!");

    // Create buttons: PvP and PvAI
    GtkWidget *button1 = gtk_button_new_with_label ("1");
    gtk_widget_class_set_css_name(GTK_WIDGET_GET_CLASS(button1), "btn1");
    GtkWidget *button2 = gtk_button_new_with_label ("2");
    gtk_widget_class_set_css_name(GTK_WIDGET_GET_CLASS(button2), "btn2");

    // Set button size and position
    gtk_grid_attach(GTK_GRID(s_grid), label, 50, 0, 40, 10);
    gtk_grid_attach(GTK_GRID(s_grid), button1, 50,  50, 40, 10);   
    gtk_grid_attach(GTK_GRID(s_grid), button2, 50, 125, 40, 10);

    gtk_window_set_child (GTK_WINDOW (s_window), s_grid);
    gtk_window_present (GTK_WINDOW (s_window));
}

int main (int argc, char *argv[]) {
    // Create a new application
    GtkApplication *app = gtk_application_new ("com.example.GtkApplication", G_APPLICATION_FLAGS_NONE);
    g_signal_connect (app, "activate", G_CALLBACK (on_active), NULL);
    return g_application_run (G_APPLICATION (app), argc, argv);
}

styles.css内容：

btn1 {
  color: green;
}

btn2 {
  color: blueviolet;
}

问题原因与解决方法 #

1. 错误使用CSS类设置函数 #

gtk_widget_class_set_css_name()是修改整个Widget类的CSS标签名，而非给单个控件添加CSS类。这种操作会覆盖按钮的默认CSS类型，导致GTK丢失按钮的基础样式，同时无法实现单个控件的样式区分。

正确做法是使用gtk_widget_add_css_class()给单个按钮添加CSS类：

// 修改按钮创建部分
GtkWidget *button1 = gtk_button_new_with_label ("1");
gtk_widget_add_css_class(button1, "btn1");
GtkWidget *button2 = gtk_button_new_with_label ("2");
gtk_widget_add_css_class(button2, "btn2");

2. CSS选择器类型错误 #

原CSS中使用btn1作为选择器，这是标签选择器，但我们添加的是CSS类，需要用类选择器（前缀加.）：

.btn1 {
  color: green;
  background-color: lightgray; /* 增加背景色确保效果可见 */
}

.btn2 {
  color: blueviolet;
  background-color: lightgray;
}

3. 窗口显示时机问题 #

原代码中在添加子控件前就调用gtk_widget_set_visible(s_window, TRUE);，可能导致控件未完全初始化就渲染，引发样式异常。建议将这行代码移到gtk_window_set_child之后：

// 调整顺序
gtk_window_set_child (GTK_WINDOW (s_window), s_grid);
gtk_widget_set_visible(GTK_WIDGET(s_window), TRUE);
gtk_window_present (GTK_WINDOW (s_window));

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