web-dev-qa-db-fra.com

Comment créer un widget coulissant (GTK +, Quickly)

J'ai récemment vu ce widget dans Gedit:

enter image description here

Il apparaît lorsque vous appuyez sur Ctrl + F. Ce qui m'intéresse, c'est comment obtenir l'effet glissant. N'hésitez pas à nous faire part de vos suggestions.

application-developmentguiquicklygtk3widgets
8
Angel Araya

J'ai obtenu un effet de fondu en utilisant pur GTK et CSS.

Cela ne fonctionne que dans GTK 3.6 et je ne suis pas sûr si un effet de glisser dans/dehors serait possible, cependant, si vous le souhaitez, vous pouvez consulter le code source à launchpad.net/uberwriter

Cela fonctionne avec un changement d'état, puis avec GTK Transitions ... Peut-être avec une hauteur/largeur qui serait possible aussi.

MODIFIER

Comme il est évident que les gens me refusent, voici une autre explication plus détaillée:

C'est le CSS que j'ai utilisé:

GtkLabel:insensitive {
    color: rgba(255,255,255,0);
    transition: 500ms ease-in-out;
}

Si vous utilisez ceci comme CSS (j'espère avoir le droit de faire référence à une explication de moi-même, comment y arriver: http://wolfvollprecht.de/blog/gtk-python-and-css-are-an-awesome -combo / ) vous pouvez alors utiliser Gtk.StateFlags pour supprimer l’étiquette.

par exemple.:

label.set_state_flags(Gtk.StateFlags.INSENSITIVE, True)

Ensuite, vous obtenez une transition vers une opacité zéro.

Cependant, comme je l'ai remarqué, il n'y a pas beaucoup d'options pour influencer le placement/la largeur avec CSS, donc je suppose que c'est limité aux couleurs/opacité, etc.

Prendre plaisir.

PS: Notez que cela seulement fonctionne dans Gtk 3.6, car Ubuntu 12.10

7
wolfv

Une telle animation n'est pas réalisable en GTK + pur. Il n'y a pas de mécanismes pour le traiter.

J'ai jeté un coup d'œil sur le code source de gedit, il est clair qu'ils traitent cette animation eux-mêmes. Je n'ai pas cherché dans les détails, car le code relatif aux animations est assez développé, mais j'ai noté qu'ils incorporaient des fonctionnalités de dessin du Caire pour le widget de recherche animée. Le widget est probablement animé en déplaçant sa position image par image et en le redessinant à un emplacement différent de la superposition utilisé dans une seule zone d'affichage de texte.

Cela semble être la solution la plus simple. (Le code de gedit semble préparé à de nombreuses animations partageant la même base de code, il peut donc être excessif d'utiliser son approche exacte dans une application simple.)

Pour reproduire cet effet, vous devrez:

  • Utilisez un widget personnalisé pour l'élément d'interface utilisateur que vous souhaitez insérer/extraire.
  • Faites-le réagir sur dessiner expirations périodiques et périodiques (pour redessiner chaque image d'animation)
  • Créez une superposition transparente sur le reste de vos widgets (ou toute zone devant apparaître comme si elle se trouvait sous le widget coulissant)
  • Dessinez le widget animé manuellement sur cette superposition.

Je ne peux pas trouver de solution plus facile. Cependant, compte tenu du fait que les développeurs de gedit connaissent très peu GTK +, il n’ya peut-être pas de solution plus simple pour obtenir cet effet.

3
Rafał Cieślak

Vous pouvez utiliser une combinaison entre Gtk.fixed (), GObject.timeout_add et la fonction move, voici un exemple dans python:

 #!/usr/bin/python * 
 de gi.repository import Gtk, GObject 
 
, classe TestWindow (Gtk.Window): 
 def animateImage (self): 
 GObject.timeout_add (150, self.slideImage) 
 
 def slideImage (self): 
 self.positionX + = 50; [50 .____.] if (self.positionX> 800): 
 self.fixedWidget.move (self.logo, self.positionX, 200) 
 renvoie True 
 sinon: 
 return False 
 
 def __init __ (self): 
 Gtk.Window .__ init __ (self, title = 'Registration') 
 
 self.positionX = 500 
 self.fixedWidget = Gtk.Fixed () 
 self.fixedWidget.set_size_request (1920,1080) 
 self.fixedWidget.show () 
 
 self.logo = Gtk.Image.new_from_file ('picture.png') 
 self.logo.show () 
 self.fixedWidget.put (self.logo, self .positionX, 200) 
 
 self.button1 = Gtk.Button ('Cliquez sur moi pour faire glisser l'image!') 
 Self.button1.show () 
 Self.button1.connect ('clicked', self.animateImage) 
 Self.button1. set_size_request (75,30) 
 self.fixedWidget.put (self.button1,750,750) 
 self.add (self.fixedWidget) 
 
 testWindow = TestWindow ( ) 
 testWindow.set_size_request (1920,1080) 
 testWindow.set_name ('testWindow') 
 testWindow.show () 
 
 Gtk.main ()
1
Brahim Ayari

De nos jours, il y a une vraie réponse à cette question. Depuis qu'il a été demandé et répondu à l'origine, le code permettant de révéler un widget de libgd - que je suppose comme étant ce que GEdit utilisait à cette époque - a été intégré dans GTK + en tant que GtkRevealer:

https://developer.gnome.org/gtk3/stable/GtkRevealer.html

GtkRevealer prend en charge diverses formes de transition, notamment les directions cardinales de la diapositive et un fondu à l'opacité.

Ainsi, ces jours-ci, il suffit simplement d’ajouter le widget que vous souhaitez transformer en GtkRevealer et d’utiliser ses propriétés :transition-(type|duration) et :reveal-child.

0
underscore_d