GTK4+C语言开发中CSS样式不生效的问题求助

你的代码存在几个关键问题导致CSS样式无法生效，逐一拆解：

1. 重复调用gtk_window_set_child导致部件被覆盖 #

gtk_window_set_child会替换窗口的当前子部件，你先后把box、txt、btn设为窗口子部件，最终只有最后一个btn会显示在窗口中，文本框和盒子都被丢弃了。

修复：把txt和btn添加到box中，再将box设为窗口子部件：

// 把文本框添加到box
gtk_box_append(GTK_BOX(box), txt);
// 把按钮添加到box
gtk_box_append(GTK_BOX(box), btn);
// 仅设置一次窗口子部件
gtk_window_set_child(GTK_WINDOW(window), box);

2. 错误使用gtk_widget_class_set_css_name设置类名 #

gtk_widget_class_set_css_name是用来修改部件的全局CSS类型名（类似HTML的<div>、<button>标签），不是用来给单个部件添加CSS类的。你给按钮设置".btn"作为类型名，既会导致CSS选择器不匹配，还会影响所有同类型部件的样式。

正确添加CSS类的方式是使用gtk_widget_add_css_class，针对单个部件操作：

// 给文本框添加"txt"类
gtk_widget_add_css_class(txt, "txt");
// 给按钮添加"btn"类
gtk_widget_add_css_class(btn, "btn");

删除原来的gtk_widget_class_set_css_name调用，这不是你需要的功能。

3. CSS选择器与部件样式的匹配问题 #

对于GtkButton，单纯设置color可能会被主题的高优先级样式覆盖，可以调整选择器精度或强制覆盖：

.btn {
  color: blueviolet;
  /* 可选：强制覆盖主题背景色 */
  background-color: #ffffff;
}

/* 更精准地选中按钮内部的标签 */
.btn label {
  color: blueviolet;
}

针对GtkText，若直接设置背景色不生效，可指定其内部文本区域：

.txt {
  background-color: blue;
  color: black;
}

/* 备选：针对文本视图的内容区域 */
.txt text {
  background-color: blue;
  color: black;
}

4. 缺少CSS加载的错误检查 #

如果styles.css路径错误（比如不在程序运行目录），样式根本不会加载，建议添加错误处理：

GError *error = NULL;
gtk_css_provider_load_from_file(provider, g_file_new_for_path("styles.css"), &error);
if (error != NULL) {
  g_printerr("加载CSS失败: %s\n", error->message);
  g_error_free(error);
}

完整修复后的代码片段 #

static void activate(GtkApplication * app, gpointer user_data)
{
    GtkWidget * window;
    GtkWidget * box;
    GtkWidget * btn;
    GtkWidget * txt;
    GtkEntryBuffer * text;
    GtkCssProvider * provider;
    GError *error = NULL;

    // 创建窗口
    window = gtk_application_window_new(app);
    gtk_window_set_title(GTK_WINDOW(window), "CSS example");
    gtk_window_set_default_size(GTK_WINDOW(window), 800, 800);

    // 加载CSS并检查错误
    provider = gtk_css_provider_new();
    gtk_css_provider_load_from_file(provider, g_file_new_for_path("styles.css"), &error);
    if (error != NULL) {
        g_printerr("加载CSS失败: %s\n", error->message);
        g_error_free(error);
    }
    gtk_style_context_add_provider_for_display(gtk_widget_get_display(window),
                                               GTK_STYLE_PROVIDER(provider),
                                               GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
    g_object_unref(provider); // 释放资源

    // 创建布局盒子
    box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 10); // 添加间距提升美观度
    gtk_widget_set_halign(box, GTK_ALIGN_CENTER);
    gtk_widget_set_valign(box, GTK_ALIGN_CENTER);
    gtk_window_set_child(GTK_WINDOW(window), box);
    
    // 创建文本框
    text = gtk_entry_buffer_new("hello world", strlen("hello world"));
    txt = gtk_text_new();
    gtk_text_set_buffer(GTK_TEXT(txt), text);
    gtk_widget_add_css_class(txt, "txt"); // 添加CSS类
    gtk_box_append(GTK_BOX(box), txt);

    // 创建按钮
    btn = gtk_button_new_with_label("clickme");
    g_signal_connect(btn, "clicked", G_CALLBACK(print_hello), NULL);
    gtk_widget_add_css_class(btn, "btn"); // 添加CSS类
    gtk_box_append(GTK_BOX(box), btn);

    gtk_window_present(GTK_WINDOW(window));
}

确保styles.css和程序运行在同一目录下，原有CSS内容无需修改即可生效。

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