Création volets dépliables

**Sve@r** · 22/05/2014, 22h28

Bonjour à tous

J'aimerais savoir s'il y a moyen de faire une espèce de volet dépliable. Cela se présenterait comme une petite vignette verticale (à la manière d'un QTabDialog) mais la vignette ferait surgir une widget dépliable/repliable à volonté.

Le QTabDialog est pas mal mais son souci dans mon cas, c'est que aller sur l'onglet n° 2 fait disparaitre tout ce qui est affiché par l'onglet n° 1. Avec une widget dépliable, on reste sur la widget de base et c'est ce que je recherche.

Merci de votre attention

PS: j'ai mis un préfixe "Qt3" à ma discussion mais en fait je suis sur Qt4 (sauf que ce préfixe n'était pas présent dans la liste des préfixes disponibles...)

Invité · 22/05/2014, 23h05

Bonsoir,

Je ne suis pas sûr de bien comprendre ce que tu souhaites... Ce message répondrait-il à tes attentes ?

**Sve@r** · 22/05/2014, 23h34

Envoyé par Winjerome

Je ne suis pas sûr de bien comprendre ce que tu souhaites...

Un dessin sera plus clair..

Nom : onglet1.jpg
Affichages : 402
Taille : 11,7 Ko

Nom : onglet2.jpg
Affichages : 486
Taille : 22,5 Ko

Donc quand on clique sur l'onglet cela ouvre la seconde widget, et si on reclique dessus (je l'ai dessiné dans l'autre sens pour faire "genre") alors cela la referme...

Envoyé par Winjerome

Ce message répondrait-il à tes attentes ?

J'ai pas l'impression. Il me semble (après une première lecture rapide) que ce sont des menus qui se déroulent et qui se replient...

Invité · 23/05/2014, 01h46

Si j'ai bien compris cette fois, on aurait un QWidget qui encapsulerait deux QWidgets dont le second serait montré/caché suite à l'appui sur la vignette du bord..
Je verrais quelque chose comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#ifndef WIDGETDEPLIABLE_H
#define WIDGETDEPLIABLE_H
 
#include <QWidget>
 
class QPushButton;
 
class WidgetDepliable : public QWidget
{
    Q_OBJECT
 
    QWidget *first;
    QWidget *second;
    QPushButton * toggleButton;
 
public:
    WidgetDepliable(QWidget *first_, QWidget *second_, QWidget *parent = 0);
 
private slots:
    void toggleSecond(bool);
};
 
#endif // WIDGETDEPLIABLE_H

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#include "widgetdepliable.h"
#include <QPushButton>
#include <QHBoxLayout>
 
WidgetDepliable::WidgetDepliable(QWidget *first_, QWidget *second_, QWidget *parent)
  : QWidget(parent)
  , first(first_)
  , second(second_)
  , toggleButton(new QPushButton)
{
    toggleButton->setCheckable(true);
    toggleButton->setChecked(true);
    toggleButton->setFixedWidth(20);
 
    QHBoxLayout * layout = new QHBoxLayout(this);
    layout->addWidget(first);
    layout->addWidget(second);
    layout->addWidget(toggleButton);
 
    connect(toggleButton, SIGNAL(toggled(bool)), SLOT(toggleSecond(bool)) );
}
 
void WidgetDepliable::toggleSecond(bool secondVisible) {
    second->setVisible(secondVisible);
}

Tu pourras par la suite hériter de QPushButton afin de personnaliser l'étiquette en redéfinissant sa méthode paintEvent().

**Sve@r** · 23/05/2014, 21h13

Envoyé par Winjerome

Je verrais quelque chose comme ça
...(code)...
Tu pourras par la suite hériter de QPushButton afin de personnaliser l'étiquette en redéfinissant sa méthode paintEvent().

Pas mal.

Comme je suis sous PyQt (et non C++/Qt), j'ai adapté ton code. Et pour comment faire pour avoir un bouton vertical, j'ai trouvé ça ici => http://www.qtcentre.org/wiki/index.p...entationButton

Ce qui donne le code suivant

Code python :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
#!/usr/bin/env python 
# -*- coding: utf-8 -*-
 
# Compatibilité python versions futures
from __future__ import print_function		# Instruction "print" devient fct
#from __future__ import unicode_literals	# Toutes chaines en unicode
#from __future__ import absolute_import		# Les imports sont en absolu
 
# Modules Python
import sys									# Paramètres et fonctions systèmes
 
from PyQt4.QtCore import *					# Moteur contrôle Qt
from PyQt4.QtGui import *					# IHM Qt
 
# Application principale
class QtAppli(
		QApplication):						# Objet hérité
	"Fenêtre de l'application"
 
	# Constructeur fenêtre
	def __init__(
			self,							# Instance objet
			argv):							# Arguments programme
 
		# Appel constructeur de l'objet hértié
		QApplication.__init__(self, argv)
 
		# Widget principale
		self.__mainWid=QMainWindow()
		self.__mainWid.setCentralWidget(QWidget(self.__mainWid))
 
		# Les widgets
		wid1=essai()
		wid1.setVisible(True)
		self.__wid2=essai()
		self.__wid2.setVisible(False)
 
		# Le bouton
		btn=QtRotatedButton(
			QApplication.translate(
				"QtAppli",
				"Déplier",
				"Note: titre du bouton",
				QApplication.UnicodeUTF8,
			),
			self.__mainWid.centralWidget(),
			Qt.Vertical,
		)
		btn.setCheckable(True)
		self.connect(
			btn,
			SIGNAL("toggled(bool)"),
			self.__slotAction,
		)
 
		# Rangement principal
		self.__mainLayout=QHBoxLayout(self.__mainWid.centralWidget())
		self.__mainLayout.addWidget(wid1, 0)
		self.__mainLayout.addWidget(btn, 0)
		self.__slotAction(False)
	# __init__()
 
	# Affichage et lancement application
	def run(
			self):							# Instance objet
 
		self.__mainWid.show()
		self.exec_()
	# run()
 
	# Slot qui affiche une fenêtre avec un texte
	def __slotAction(
			self,							# Instance objet
			flag):
 
		if flag:
			self.__mainLayout.removeItem(self.__mainLayout.itemAt(2))
			self.__mainLayout.insertWidget(1, self.__wid2, 2)
			self.__wid2.setVisible(True)
		else:
			self.__wid2.setVisible(False)
			self.__mainLayout.removeWidget(self.__wid2)
			self.__mainLayout.addStretch(1)
	# __slotAction()
# class QtAppli
 
class QtRotatedButton(QPushButton):
	# Getters/Setters
	def get_orientation(self): return self.__orientation
	def set_orientation(self, o):
		self.__orientation=o
		self.setSizePolicy(
			*{
				Qt.Horizontal : (QSizePolicy.Minimum, QSizePolicy.Fixed),
				Qt.Vertical : (QSizePolicy.Fixed, QSizePolicy.Minimum),
			}[o]
		)
	orientation=property(get_orientation, set_orientation)
	def get_mirrored(self): return self.__mirrored
	def set_mirrored(self, m): self.__mirrored=m
	mirrored=property(get_mirrored, set_mirrored)
 
	def __init__(self, text, parent, orientation=Qt.Horizontal, mirrored=False):
		QPushButton.__init__(self, text, parent)
		self.__orientation=orientation
		self.__mirrored=mirrored
	# __init__()
 
	def sizeHint(self):
		size=QPushButton.sizeHint(self)
		if self.__orientation == Qt.Vertical: size.transpose()
		return size
	# sizeHint()
 
	def paintEvent(self, event):
		p=QStylePainter(self)
		if self.__orientation == Qt.Horizontal:
			if self.__mirrored:
				p.rotate(180)
				p.translate(-self.width(), -self.height())
			# if
		# if
 
		if self.__orientation == Qt.Vertical:
			if self.__mirrored:
				p.rotate(-90)
				p.translate(-self.height(), 0)
			else:
				p.rotate(90)
				p.translate(0, -self.width())
			# if
		# if
		p.drawControl(QStyle.CE_PushButton, self.__getStyleOption())
	# paintEvent()
 
	def __getStyleOption(self):
		opt=QStyleOptionButton()
		opt.initFrom(self)
		if self.__orientation == Qt.Vertical:
	   		size = opt.rect.size()
	   		size.transpose()
	   		opt.rect.setSize(size)
		# if
		opt.features = QStyleOptionButton.None
		if self.isFlat(): opt.features |= QStyleOptionButton.Flat
		if self.menu(): opt.features |= QStyleOptionButton.HasMenu
		if self.autoDefault() or self.isDefault():
	   		opt.features |= QStyleOptionButton.AutoDefaultButton
		if self.isDefault(): opt.features |= QStyleOptionButton.DefaultButton
		if self.isDown() or (self.menu() and self.menu().isVisible()):
	   		opt.state |= QStyle.State_Sunken
		if self.isChecked(): opt.state |= QStyle.State_On
		if not self.isFlat() and not self.isDown():
	   		opt.state |= QStyle.State_Raised
		opt.text = self.text()
		opt.icon = self.icon()
		opt.iconSize = self.iconSize()
		return opt
	# __getStyleOption
# class QtRotatedButton
 
class essai(QDialog):
	def __init__(self):
		QDialog.__init__(self)
 
		line1=QLineEdit()
		line2=QLineEdit()
		line3=QLineEdit()
 
		mainLayout=QVBoxLayout(self)
		mainLayout.addWidget(line1, 0)
		mainLayout.addWidget(line2, 0)
		mainLayout.addWidget(line3, 0)
		mainLayout.addStretch(1)
	# __init__()
# class essai
 
if __name__ == "__main__":
	# Lancement appli
	QtAppli(sys.argv).run()
# if

Et le résultat

Nom : fen1.jpg
Affichages : 440
Taille : 8,9 Ko

...

Nom : fen2.jpg
Affichages : 397
Taille : 12,9 Ko

Tu remarqueras la subtilité où je mets un Stretch quand la widget2 est repliée et où je le supprime lorsque j'affiche la widget dépiée.

C'est super. Un grand merci de ton aide. Bon j'espérais trouver un équivalent déjà tout fait (comme un QTabDialog) et non avoir à le faire moi-même. Et merci aussi pour l'info sur le paintEvent à redéfinir qui m'a donné le point de départ où chercher afin de pouvoir dessiner un bouton vertical.

A la limite, je vais essayer de fignoler tout ça afin de proposer un "QDeployDialog" bien propre et utilisable comme l'est le QTabDialog.

Encore merci

Création volets dépliables

Qt

Vue hybride

Discussions similaires

Partager

Partager