我如何在 GTK4 中通过对象 ID 应用 CSS 属性？

Question

我正在从头开始学习 GTK4，使用 GTKBuilder XML 构造对象并 CSS 从文件添加样式信息，使用：

const char cssPath[] = "/a/path/that/is/confirmed/to_be/working.css";
GtkCssProvider * cssProvider = gtk_css_provider_new();
gtk_css_provider_load_from_path(cssProvider, cssPath);
gtk_style_context_add_provider_for_display(gdk_display_get_default(), GTK_STYLE_PROVIDER(cssProvider), GTK_STYLE_PROVIDER_PRIORITY_USER);

当我使用通用 CSS 选择器时，我的样式更改会生效，如下所示：

box { background-color: white; }
/* box goes white as expected */

但是当我尝试使用它的 id="myBox" XML 属性定位特定对象时，它不起作用：

box#myBox { background-color: white; }
/* no colour change happens */

或

#myBox { background-color: white; }
/* no colour change happens here either */

我的 XML.ui 文件中的相关部分是：

    <object class="GtkBox" id="myBox">
        <property name="halign">GTK_ALIGN_CENTER</property>
        <child>

            <object class="GtkLabel" id="centreLabel">
                <property name="single-line-mode">true</property>
                <property name="xalign">0</property>
                <property name="yalign">0.5</property>
            </object>
        </child>
    </object>

也许我误解了 CSS 选择器相对于使用 GtkBuilder 实例化的对象的工作方式？我已经阅读了文档，所以我将不胜感激任何人可以在这里提供的帮助！

干杯。

Answer 1

使用 UI 文件中的 name 属性，您可以设置您希望 <object> 拥有的特定 Css 名称。为了使用这个自定义名称，您还需要在 Css 中的 myBox 名称前面加上 #，您已经完成了。

要定义 name 属性，只需在 UI 文件中的 Box 对象下添加此行：

<property name="name">myBox</property>

您的 UI 文件应该如下所示：

    <object class="GtkBox" id="myBox">
        <property name="halign">GTK_ALIGN_CENTER</property>
        <property name="name">myBox</property>
        <child>

            <object class="GtkLabel" id="centreLabel">
                <property name="single-line-mode">true</property>
                <property name="xalign">0</property>
                <property name="yalign">0.5</property>
            </object>
        </child>
    </object>

Css 应该是这样的（你已经有了这样的）：

#myBox { background-color: white; }

Answer 2

我刚刚用 GTK3 完成了这个过程。糟糕的文档。

无论如何，我遇到了与您完全相同的问题，解决方案是忽略 GTK 文档（看图）。

您需要以下内容来引用命名节点，我将使用您的示例：

box#myBox { background-color: white; }

更改为：

#myBox box{ background-color: white; }

GTK 网站上没有列出此解决方案。

我如何在 GTK4 中通过对象 ID 应用 CSS 属性？

How do I apply CSS attributes by object id in GTK4?

css

gtk

gtkbuilder

gtk4