2016-05-14 7 views
0

GTK3: Ich habe zwei GtkLabel Widgets in einem GtkButton (über eine HBox) wie folgt aus:Ist es möglich zwei Kinder in einem GtkButton anders zu stylen?

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

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

Wenn die Taste I der Hintergrund schwarz machen wollen umgeschaltet wird und die beiden Etiketten sollten Farbe entsprechend ändern.

Ist es möglich, dies nur mit CSS zu tun? Diese

ist, was ich habe versucht:

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; 
} 

Der Wert Etikett bleibt grau, wenn die Taste gedrückt wird, so dass der letzte Abschnitt gilt nicht. Ist das etwas, was erwartet wird?

Antwort

0

Ok, also kann ich das zum Laufen bringen, indem ich dynamisch eine Klasse zum Wertlabel hinzufüge, z. so, aber die ursprüngliche Frage bleibt: Kann es nur mit CSS gemacht werden?

EDIT: In neueren Versionen von GTK3, z. 3.18.9 (die in Ubuntu Xenial enthaltene), funktioniert die CSS-only-Lösung wie erwartet!

Ich lasse die alte Lösung für diejenigen, die mit einer älteren GTK-Version stecken bleiben.

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() 

und die entsprechende 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; 
} 
Verwandte Themen