GtkCssProvider 和 CSS 样式的问题

Posted 2023-02-16

【中文标题】GtkCssProvider 和 CSS 样式的问题

【英文标题】：Problems with GtkCssProvider and CSS styles

【发布时间】：2021-03-22 13:25:17

【问题描述】：

我正在使用 GTK3 开发简单的程序，并尝试使用 GtkCssProvider 为特定的小部件（片段）设置 CSS 样式：

text = gtk_text_view_new();
provider = gtk_css_provider_new();
gtk_css_provider_load_from_data(provider,
                                    "textview "
                                    "  font-family: serif;"
                                    "  font-size: 30px;"
                                    "  margin-top: 10px;"
                                    "  margin-bottom: 10px;"
                                    "  color: green;"
                                    "",-1, NULL);
context = gtk_widget_get_style_context(text);
gtk_style_context_add_provider(context,
                                GTK_STYLE_PROVIDER(provider),
                                GTK_STYLE_PROVIDER_PRIORITY_USER);

字体属性设置正确，但边距和颜色不正确。我没有任何 CSS 解析错误。如果我使用 g_object_set() 函数来设置例如边距，一切正常：

g_object_set(text, "margin-top", 10, NULL);
g_object_set(text, "margin-bottom", 10, NULL);

任何想法，有什么问题？有CSS的东西吗？也许有更好的方法来使用 GtkTextView 属性（文本和小部件颜色）？我还尝试了 GtkInspector 工具和直接 CSS 编辑，但这对于边距和颜色也不起作用。

【问题讨论】：

尝试从margin-top: 10px 中删除px，看看是否应用了边距。 （你没有在g_object_set(text, "margin-top", 10, NULL); 中添加px ！）

可能不是最好的主意，有解析问题（同样的效果没有边距）：Gtk-WARNING **：主题解析错误：：1:59：不推荐使用单位。假设'px'。 Gtk-WARNING **：主题解析错误：：1:77：不推荐使用不使用单位。假设为 'px'。

你的 Gtk 版本是多少？

3.22.30 (Ubuntu 18.04 LTS)

你能给我一个最小可重现 Compileable 示例，以便我可以在我的机器上测试它（Gtk 30.24，Ubuntu 18.04 LTS）

【参考方案1】：

显示问题的最小可编译示例（查看边距取消注释第 57-60 行）。使用 gcc 7.5.0 编译。

#include <gtk/gtk.h>
#include <gdk/gdk.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <unistd.h>
#include <stdbool.h>

static GtkWidget *window;
static GtkWidget* layoutGrid;
static GtkWidget* textLog;
static GtkTextBuffer* bufferLog;
static GtkCssProvider* cssProviderLog;
static GtkStyleContext* context;

gboolean wndDeleteEventHandler(__attribute__((unused)) GtkWidget* widget,
                                __attribute__((unused)) GdkEvent* event,
                                __attribute__((unused)) gpointer user_data)

    gtk_main_quit();
    
    return TRUE;


int main(int argc, char** argv)

    gtk_init(&argc , &argv);
    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_default_size(GTK_WINDOW(window), 640, 480);
    gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
    g_signal_connect(window, "delete-event", G_CALLBACK(wndDeleteEventHandler), NULL);

    layoutGrid = gtk_grid_new();
    gtk_widget_set_hexpand(layoutGrid, TRUE);
    gtk_widget_set_vexpand(layoutGrid, TRUE);
    gtk_container_add(GTK_CONTAINER(window), layoutGrid);

    textLog = gtk_text_view_new();
    gtk_widget_set_name(textLog, "textlog");
    bufferLog = gtk_text_view_get_buffer(GTK_TEXT_VIEW (textLog));
    cssProviderLog = gtk_css_provider_new();
    gtk_css_provider_load_from_data(cssProviderLog,
                                    "textview "
                                    "font-family: serif;"
                                    "font-size: 30px;"
                                    "margin-top: 10px;"
                                    "margin-bottom: 10px;"
                                    "color: green;"
                                    "",-1, NULL);
    context = gtk_widget_get_style_context(textLog);
    gtk_style_context_add_provider(context,
                                GTK_STYLE_PROVIDER(cssProviderLog),
                                GTK_STYLE_PROVIDER_PRIORITY_USER);
    gtk_text_buffer_set_text(bufferLog, "Hello, this is some text in log buffer", -1);
    gtk_widget_set_hexpand(textLog, TRUE);
    gtk_widget_set_vexpand(textLog, TRUE);
    // g_object_set(textLog, "margin-left", 20, NULL);
    // g_object_set(textLog, "margin-top", 20, NULL);
    // g_object_set(textLog, "margin-bottom", 20, NULL);
    // g_object_set(textLog, "margin-right", 20, NULL);
    gtk_grid_attach(GTK_GRID(layoutGrid), textLog, 0, 0, 1, 1);

    gtk_widget_show_all(window);
    gtk_main();

生成文件

C = gcc
CFLAGS = -c

OBJ = \
    screen.o

.c.o:
    $(C) $(CFLAGS) $(INCLUDES) `pkg-config --cflags --libs gtk+-3.0` $<

all: $(OBJ)
    $(C) -o test $(OBJ) `pkg-config --cflags --libs gtk+-3.0`

【讨论】：

好的，我的机器上同时安装了 Gtk 3.22 和 Gtk 3.24，两个版本都是一样的：css 提供者没有边距，gtk_object_set 存在边距 ...

【参考方案2】：

根据GtkTextview docs 中的 CSS 节点列表，您似乎必须在边框子节点上应用边距，并且字体应应用于文本子节点，因此您的 CSS 可能如下所示：

textview border.top 
    margin-top: 10px;


textview border.bottom 
    margin-bottom: 10px;


texview text 
    font-family: serif;
    font-size: 30px;
    color: green;

如果这能解决您的问题，请告诉我！

【讨论】：

感谢您迄今为止的承诺！不幸的是，上述陈述仍然对我不起作用。你知道我可以检查关于使用 CSS 的 GTK3 示例集吗？

@Robert 我得到了设置字体大小、系列和颜色的代码，目前也正在应用margis ...

@Robert 不，我找不到任何关于如何使用 CSS 设置 Gtk 小部件样式的示例

@Robert 我终于得到了this question 的答案，并且不可能从 CSS 中为 GtkTextView 设置边距。您只能使用代码中的.set_margin* 函数来设置它们。但也许你可以在 GtkGrid 上设置 CSS 的边距，因为它是 GtkContainer 就像 GtkVBox ...