是否可以根据 GtkButton 的状态为两个 children 设置不同的样式？

Question

GTK3：我在 GtkButton 中有两个 GtkLabel 小部件（通过 HBox），如下所示：

[name_label (black)  value_label (grey)]  - button inactive (white background)

[name_label (white)  value_label (yellow)]  - button active (black background)

切换按钮时，我希望背景变为黑色，并且两个标签应相应地改变颜色。

是否可以只使用 CSS 来做到这一点？

这是我试过的：

from gi.repository import Gtk, Gdk

window = Gtk.Window()
button = Gtk.Button()
hbox = Gtk.HBox()
name = Gtk.Label('Name')
value = Gtk.Label('Value')
value.set_name('value')
hbox.set_spacing(10)
hbox.pack_start(name, expand=False, fill=True, padding=0)
hbox.pack_start(value, expand=False, fill=True, padding=0)
button.add(hbox)
window.add(button)

window.connect('destroy', Gtk.main_quit)
window.show_all()

screen = Gdk.Screen.get_default()
css_provider = Gtk.CssProvider()
css_provider.load_from_path('style.css')

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

Gtk.main()

style.css:

.button {
  background-color: white;
  background-image: none;
}

.button #value {
  color: grey;
}

.button:active {
  background-color: black;
  background-image: none;
  color: white;
}

.button:active #value {
  color: yellow;
}

按下按钮时值标签保持灰色，因此最后一节不适用。这是意料之中的事吗？

Answer 1

好的，所以我可以通过动态添加 class 到值标签来让它工作，例如像这样，但最初的问题仍然存在：仅使用 CSS 可以完成吗？

编辑： 在较新版本的 GTK3 中，例如3.18.9（包含在 Ubuntu Xenial 中的那个），仅 CSS 的解决方案按预期工作！

我在下面为那些坚持使用旧 GTK 版本的人保留了旧的解决方案。

from gi.repository import Gtk, Gdk

window = Gtk.Window()
button = Gtk.Button()
hbox = Gtk.HBox()
name = Gtk.Label('Name')
value = Gtk.Label('Value')
value.set_name('value')
hbox.set_spacing(10)
hbox.pack_start(name, expand=False, fill=True, padding=0)
hbox.pack_start(value, expand=False, fill=True, padding=0)
button.add(hbox)
window.add(button)

window.connect('destroy', Gtk.main_quit)
window.show_all()

screen = Gdk.Screen.get_default()
css_provider = Gtk.CssProvider()
css_provider.load_from_path('style.css')

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

ctx = value.get_style_context()

def active(widget):
    ctx.add_class('active_value')

def inactive(widget):
    ctx.remove_class('active_value')

button.connect('pressed', active)
button.connect('released', inactive)
Gtk.main()

和对应的CSS：

.button {
  background-color: white;
  background-image: none;
}

.button #value {
  color: gray;
}

.button #value.active_value {  /* value label when the button is pressed */
  color:yellow;
}

.button:active {
  background-color: black;
  background-image: none;
  color: white;
}

是否可以根据 GtkButton 的状态为两个 children 设置不同的样式？

Is it possible to style two children differently in a GtkButton depending on its state?

css

pygobject

gtk3