Gtk.CssProvider() 基于 ID 的选择器如何在 Gtk3 中工作？

Question

我已经断断续续地摆弄了几天，但似乎无法解决可能出现的问题。

基本上，我正在尝试使用 CSS 样式声明在 Gtk3 中设置 Gtk 小部件的样式，这并不复杂，只是尝试通过其 id/name 来定位特定元素。 Gtk.CssProvider() 的 Gtk 文档说

#widgetname { background-color: #333333; }

应该作为名称设置为“widgetname”的小部件的有效选择器，但我似乎无法让它工作。我最初以为是 CSS 未加载，但我可以像这样定位顶级小部件：

GtkWindow { background-color: #333; }

它会将样式应用到窗口，我可以看到背景颜色发生了变化。我尝试使用该名称作为几种不同类型小部件（GtkEventBox、GtkTextView、GtkStatusBar、GtkBox）的 ID，但基于 ID 的选择器似乎不起作用。

这是我如何加载 css 的简短 sn-p：

css = Gtk.CssProvider()

# css.load_from_file(file)
css.load_from_data('''

GtkWindow {
    background-color: #333;
}

GtkEventBox {
    background-color: #333;
}

#statusbarwrap, #textview_event_wrap, #box1 {
     background-color: #333;
}

''')

style_context = self.get_style_context()
style_context.add_provider(
    css,
    Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)

这是 GtkCssProvider https://developer.gnome.org/gtk3/3.7/GtkCssProvider.html 的文档

该页面上的示例 24（只需向下滚动一两页）表明 #ID 选择器是有效的，我正在为 Glade 中的小部件设置名称。

任何帮助将不胜感激。

Answer 1

我们可以使用 'gtk_widget_set_name()' 给这个小部件一个名称（ID）。

win = Gtk.Window()
win.set_name('main_window')

那么 '#main_window' 可以作为 CSS3 中的 ID 选择器：

#main_window {
  background-color: ...
}

如果你用文本编辑器打开一个glade文件，你会发现，widget的名字实际上被标记为id，像这样：

<object class="GtkWindow" id="window1">

请注意，小部件的名称不应包含特殊字符，如 *、# 或 >，它们是 CSS 语法的一部分。

Answer 2

以下是一个完整的例子，我在这里发布它是为了澄清 Gtk3+CSS 中名称和 ID 之间的混淆：

german.py：

# coding: utf-8
from gi.repository import Gtk, Gdk
import time

builder = Gtk.Builder()
builder.add_from_file("german.glade")
builder.connect_signals({"closeApplication": Gtk.main_quit})

screen = Gdk.Screen.get_default()

css_provider = Gtk.CssProvider()
css_provider.load_from_path('german.css')

context = Gtk.StyleContext()
context.add_provider_for_screen(screen, css_provider,
  Gtk.STYLE_PROVIDER_PRIORITY_USER)

window = builder.get_object("applicationwindow1")
window.show_all()

Gtk.main()

german.css：

#blackBox {
  background-color: black;
}
#redBox {
  background-color: red;
}
.goldBox {
  background-color: gold;
}

german.glade：

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.16.1 -->
<interface>
  <requires lib="gtk+" version="3.0"/>
  <object class="GtkApplicationWindow" id="applicationwindow1">
    <property name="can_focus">False</property>
    <signal name="delete-event" handler="closeApplication" swapped="no"/>
    <child>
      <object class="GtkBox" id="box1">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <property name="orientation">vertical</property>
        <child>
          <object class="GtkEventBox" id="blackBox">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <child>
              <placeholder/>
            </child>
          </object>
          <packing>
            <property name="expand">True</property>
            <property name="fill">True</property>
            <property name="position">0</property>
          </packing>
        </child>
        <child>
          <object class="GtkEventBox" id="eventbox2">
            <property name="name">redBox</property>
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <child>
              <placeholder/>
            </child>
          </object>
          <packing>
            <property name="expand">True</property>
            <property name="fill">True</property>
            <property name="position">1</property>
          </packing>
        </child>
        <child>
          <object class="GtkEventBox" id="eventbox3">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <child>
              <placeholder/>
            </child>
            <style>
              <class name="goldBox"/>
            </style>
          </object>
          <packing>
            <property name="expand">True</property>
            <property name="fill">True</property>
            <property name="position">2</property>
          </packing>
        </child>
      </object>
    </child>
  </object>
</interface>

结果：

三个盒子垂直排列，就像德国国旗一样。除了第一个框不是黑色的，因为#name 指的是具有匹配“name”属性的对象，而不是具有该 id 的对象。

我花了一段时间才弄明白。我自己是 Gtk3 的新手...