未应用 GTK3 CSS 样式

Question

我无法通过名称在小部件上设置任何样式。这是我的代码：

#include <gtk/gtk.h>

#define CSS_STYLE           "\
#first {                     \
    background-color: black; \
    background-image: none;  \
    border-width: 0;         \
    color: yellow            \
}"

int main (void)
{
    gtk_init(0, NULL);

    GtkWidget *win = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    g_signal_connect(win, "delete_event", G_CALLBACK(gtk_main_quit), NULL);

    GtkWidget *radio1 = gtk_radio_button_new(NULL);
    gtk_widget_set_name(radio1, "first");
puts(gtk_widget_get_name(radio1));

    GtkCssProvider *provider = gtk_css_provider_new();
    gtk_css_provider_load_from_data(provider, CSS_STYLE, -1, NULL);
    gtk_style_context_add_provider_for_screen(gdk_screen_get_default(), GTK_STYLE_PROVIDER(provider), GTK_STYLE_PROVI>

    gtk_container_add(GTK_CONTAINER(win), radio1);
    gtk_widget_show_all(win);
    gtk_main();

    exit(EXIT_SUCCESS);
}

非缩进 puts 表明单选按钮的名称设置正确。但是 none 应用了样式。我知道代码是正确的，因为如果我在 css 中将 #first 更改为 radio，样式将应用于单选按钮。

有人可以帮我理解我做错了什么吗？

Answer 1

我能给出的最佳解释是，单选按钮小部件实际上由设置在背景区域内并可以包含标签的“单选”子小部件组成。因此，单选按钮小部件作为一个整体将填满它所在的小部件。在您的代码中，由于您将单个单选按钮小部件直接附加到 window，该小部件将扩展以填充整个 window。所以你会看到一个全黑的 window 和小按钮。为了与这种行为形成对比，我对您的代码进行了修改，将单选按钮放入网格小部件（连同占位符按钮小部件），然后将网格小部件放入 window。以下是修改后的代码。

#include <gtk/gtk.h>

#define CSS_STYLE           "\
#first {                     \
    background-color: black; \
    background-image: none;  \
    border-width: 20;        \
    color: yellow            \
}

int main (void)
{
    gtk_init(0, NULL);
    
    GtkWidget *win = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    g_signal_connect(win, "delete_event", G_CALLBACK(gtk_main_quit), NULL);
    
    GtkWidget *grid = gtk_grid_new();
    GtkWidget *button = gtk_button_new_with_label("OK");
    
    GtkWidget *radio1 = gtk_radio_button_new(NULL);
    gtk_widget_set_name(radio1, "first");
    
    gtk_grid_attach(GTK_GRID(grid), radio1, 0, 0, 1, 1);
    gtk_grid_attach(GTK_GRID(grid), button, 1, 0, 1, 1);
    
    GtkCssProvider *provider = gtk_css_provider_new();
    gtk_css_provider_load_from_data(provider, CSS_STYLE, -1, NULL);
    gtk_style_context_add_provider_for_screen(gdk_screen_get_default(), GTK_STYLE_PROVIDER(provider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
    
    gtk_container_add(GTK_CONTAINER(win), grid);
    gtk_window_set_default_size(GTK_WINDOW(win), 200, 100); /* Added this is to give the window an initial size */
    gtk_widget_show_all(win);
    gtk_main();
    
    exit(EXIT_SUCCESS);
}

以下是一些示例图像，对比了将单选按钮小部件直接附加到 window 与将单选按钮小部件插入网格然后将网格附加到 window。

您仍然可以看到一些不想要的背景效果。因此，要真正将背景与按钮占据的区域相关联，需要包括对单选按钮小部件的“单选”元素的引用，如下所示。

#first radio {              \

修改样式定义将导致单选按钮图标的背景设置如下图所示。

最后一点要谈的是 CSS 块中的颜色属性。您似乎想将单选按钮颜色更改为黄色。然而，实际出现的按钮是一个图标，其来源取决于所使用的主题，通常可以在主题的资产文件夹中找到。但是，如果您想将图标图像定向到另一个主题中的同一图像，则可以使用冗长的 GTK 主题参考。以下是您可以使用的 GTK-specific CSS 指令，我已将其集成到您的 CSS 定义中。

#define CSS_STYLE           "\
#first radio {              \
    background-color: black; \
    background-image: none;  \
    border-width: 20;         \
} \
#first radio:checked {-gtk-icon-source: -gtk-scaled(url(\"/usr/share/themes/Mint-X-Orange/gtk-3.0/assets/radio-selected.png\"), \
    url(\"/usr/share/themes/Mint-X-Orange/gtk-3.0/assets/radio-selected@2.png\"));\
}"

有点乱，但它确实将单选按钮图标重定向到不同颜色的图标。

仅供参考，我选择了橙色。我没有在我的系统上发现黄色主题。此外，这个主题文件夹结构是 Linux Mint 存储主题信息的方式。它可能在您的系统上有所不同，因此如果您想影响所使用的图标，您可能需要进行一些探索。

我希望这能澄清事情。

此致。

未应用 GTK3 CSS 样式

GTK3 CCS style not being applied

css

c

gtk

gtk3