[PYQT6] Mise en page d'une grille

**darphil** · 28/05/2024, 20h49

Avec pyqt6, j'essaye de faire une grille (QGridLayout) mais je bloque sur la mise en page de celle-ci.

J'ai plusieurs qframes qui sont toutes de taille (columnSpan) 1.
Excepte "a" "b" et "1400" qui sont de taille (columnSpan) 2.
Les dimensions de "1400" et "b" ne sont pas les mêmes que celle de "A", cela doit venir de l'espacement entre les deux Qframes "82" au-dessus de "A".
Je voudrais que la taille de ces trois qframes soient identiques en laissant cet espace entre les deux "82".
Y a-t-il moyen de faire cela, pourriez, vous m'aider ou tout du moins m'orienter.

Nom : Capture.JPG
Affichages : 255
Taille : 18,3 Ko

Nom : Capture.JPG
Affichages : 255
Taille : 18,3 Ko

**VinsS** · 29/05/2024, 08h32

Salut,

Simple, tu mets les deux B2 qui superpose A dans un layout horizontal et tu insère ce layout dans ta grille comme un seul widget.

Dans ce layout horizontal tu pourras fixer l'espace qui sépare les deux QFrame pour obtenir la largeur désirée.

**darphil** · 31/05/2024, 21h09

Merci je vais essayer cela.
J'avoue être un peux perdu avec les layouts.

**darphil** · 09/06/2024, 17h23

J'ai essayé, mais cela ne donne toujours pas ce que je veux. Si quelqu’un passe par là et peut m'aider ?
Voici une capture de tout mon tableau et mon code.

Nom : tab.jpg
Affichages : 89
Taille : 182,3 Ko

Nom : tab.jpg
Affichages : 89
Taille : 182,3 Ko

Rappel
J'ai plusieurs qframes qui sont toutes de taille (columnSpan) 1.
Excepte "a" "b" et "00" qui sont de taille (columnSpan) 2.
Les dimensions de "00" et "b" ne sont pas les mêmes que celle de "A".
Je voudrais que la taille (2 colonnes) des qframes "a" "b" et "00" soient identiques et que tout les autres qframes reste à 1 colonne.

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
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
import sys
import Darphil
from VariableGlobal import *
from PyQt6 import QtCore
from PyQt6.QtWidgets import QApplication, QMainWindow, QLabel,QFrame, QVBoxLayout,QWidget, QGridLayout,QScrollArea,QHBoxLayout
from PyQt6.QtCore import QBasicTimer,Qt, QMimeData
from PyQt6.QtGui import QDrag


class DpLabel(QLabel):
    def __init__(self, numero, tableau=None):
        super().__init__(numero,tableau)
        self.timer = QBasicTimer()
        self.tableau = tableau
        self.setStyleSheet("border: none;")
        self.setAcceptDrops(True)
        self.initUI(numero)

    def initUI(self,numero):
        self.setText(numero)

    def timerEvent(self, event):
        self.timer.stop()
 
    def mousePressEvent(self, event):
        if event.button() == Qt.MouseButton.LeftButton:
            if self.timer.isActive():
                self.actionDblClick(self.text())
                self.timer.stop()
            else:
                self.timer.start(250, self)
                drag = QDrag(self)
                mime_data = QMimeData()
                mime_data.setText(self.text())
                drag.setMimeData(mime_data)
                drag.exec(Qt.DropAction.MoveAction)

    def dragEnterEvent(self, event):
        if event.mimeData().hasText():
            event.acceptProposedAction()

    def dropEvent(self, event):
        self.setText(event.mimeData().text())

    def actionDblClick(self,text):
        print(text)


class Cellule(QFrame):
    def __init__(self,numero,coulNiv,tableau=None):
        super().__init__(tableau)
        self.tableau = tableau
        self.setStyleSheet(f"color: {coulNiv}; border: {Darphil.calcul_Taille_Font(1)}px solid {coulNiv};")
        self.initUI(numero,coulNiv)

    def initUI(self,numero,coulNiv):        
        self.label = DpLabel(numero,self.tableau)
        self.label.setAlignment(Qt.AlignmentFlag.AlignCenter)
        layout = QVBoxLayout()
        layout.addWidget(self.label)
        self.setLayout(layout)  


# Base du tableau----------------------------------------------------------------------------------
class TableauPop(QMainWindow):
    "Mise en place de la base pour la construction du tableau"
    def __init__(self):
        super().__init__()
        self.setObjectName("TableauPop")
        self.setWindowTitle("Tableau population MA")
        self.setStyleSheet(couleur.tableau)
        self.cellule = {}
        self.setupUi()
        
    def setupUi(self):
        self.centralwidget = QWidget(parent=self)
        self.horizontalLayout = QHBoxLayout(self.centralwidget)
        self.horizontalLayout.setContentsMargins(0, 0, 0, 0)
        self.horizontalLayout.setSpacing(0)
        self.zoneScroll = QScrollArea(parent=self.centralwidget)
        self.zoneScroll.setStyleSheet("border: none;")
        self.zoneScroll.setWidgetResizable(True)
        self.scrollAreaWidgetContents = QWidget()
        self.scrollAreaWidgetContents.setGeometry(QtCore.QRect(0, 0, 1280, 1024))
        self.scrollAreaWidgetContents.setMinimumSize(QtCore.QSize(1280, 1024))
        self.tableau = QGridLayout(self.scrollAreaWidgetContents)

        self.dictCellule = {}  # Dictionnaire pour stocker les cellules (qframe)
        premierLigne=["21","23","25", "27", "29", "31", "33", "35", "37", "39", "41", "43", "niv", "38", "36", "34", "32", "30", "28", "26", "24", "22"]
        deuxiemeLigne=["19", "17", "15", "13", "11", "09", "07", "05", "03", "01", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20"]
        annexeLigne=["23", "21", "19", "17", "15", "13", "11", "09", "07", "05", "03", "01", "popaxe", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22", "24"]      

        for niveau in range(1,9):#9
            if niveau==1:
                coulNiv=couleur.niveau1
                col=0
                lig=0
            elif niveau==2:
                coulNiv=couleur.niveau2
                col=0
                lig=3
            elif niveau==3:
                coulNiv=couleur.niveau3
                col=0
                lig=6
            elif niveau==4:
                coulNiv=couleur.niveau4
                col=0
                lig=9
            elif niveau==5:
                coulNiv=couleur.niveau5
                col=26#29
                lig=0
            elif niveau==6:
                coulNiv=couleur.niveau6
                col=26
                lig=3
            elif niveau==7:
                coulNiv=couleur.niveau7
                col=26
                lig=6
            elif niveau==8:
                coulNiv=couleur.niveau8
                col=26
                lig=9
            
            
            cpt=0
            #premiere rangee ----------------------------------------------------------------------
            for num in premierLigne:
                if num=="niv":
                    separation = QFrame()
                    separation.setFrameShape(QFrame.Shape.VLine)
                    separation.setStyleSheet(f"border: {Darphil.calcul_Taille_Font(3)}px dashed {couleur.separation};")
                    self.tableau.addWidget(separation, lig, col+cpt, 1, 1)
                    cpt+=1
                cell = Cellule(f"{num}",coulNiv,self)
                self.tableau.addWidget(cell,lig,col+cpt,1,1)
                self.dictCellule[f"{num}"] = cell
                cpt+=1

            cell = Cellule("00",coulNiv,self)
            self.tableau.addWidget(cell,lig,col+cpt,1,2)
            self.dictCellule["00"] = cell

            # deuxieme rangee ---------------------------------------------------------------------
            cell = Cellule("A",coulNiv,self)
            self.tableau.addWidget(cell,lig+1,col,1,2)
            self.dictCellule["A"] = cell
            
            cpt=2
            for num in deuxiemeLigne:
                if num=="02":
                    separation = QFrame()
                    separation.setFrameShape(QFrame.Shape.VLine)
                    separation.setStyleSheet(f"border: {Darphil.calcul_Taille_Font(3)}px dashed {couleur.separation};")
                    self.tableau.addWidget(separation, lig+1, col+cpt, 1, 1)
                    cpt+=1
                cell = Cellule(f"{num}",coulNiv,self)
                self.tableau.addWidget(cell,lig+1,col+cpt,1,1)
                self.dictCellule[f"{num}"] = cell
                cpt+=1

            cell = Cellule("B",coulNiv,self)
            self.tableau.addWidget(cell,lig+1,col+cpt,1,2)
            self.dictCellule["B"] = cell
            
            separation = QFrame()
            separation.setFrameShape(QFrame.Shape.HLine)
            separation.setStyleSheet(f"border: {Darphil.calcul_Taille_Font(3)}px solid {couleur.separation};")
            self.tableau.addWidget(separation, lig+2, 0, 1, 51)
            separation = QFrame()
            separation.setFrameShape(QFrame.Shape.VLine)
            separation.setStyleSheet(f"border: {Darphil.calcul_Taille_Font(3)}px solid {couleur.separation};")
            self.tableau.addWidget(separation, 0, 25, 11, 1)

        self.zoneScroll.setWidget(self.scrollAreaWidgetContents)
        self.horizontalLayout.addWidget(self.zoneScroll)
        self.setCentralWidget(self.centralwidget)

**fred1599** · 10/06/2024, 20h05

Bonsoir,

Votre code n'est pas testable, il ne reste plus de votre part qu'à nous dire ce que vous n'arrivez pas à faire. ( Trouver la méthode pour modifier la largeur d'un QFrame ? )

**darphil** · 12/06/2024, 09h53

Bonjour et merci de me consacrer du temps.

Oui, je n'arrive pas à trouver le truc pour pouvoir mettre toutes mes qframes à 1 colonne, excepté "A" "B" "00" que je voudrais mettre à 2 colonnes.

Dans la capture, on vois que "A" et "B" malgré" avoir mis colspan à 2 elles n'ont pas la même dimensions et je ne trouve pas ça fort beaux.

Pour le code, je l'ai modifié, normalement cela devrait aller 🤞.

Nom : tab2.jpg
Affichages : 63
Taille : 21,2 Ko

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
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
import sys
from PyQt6 import QtCore
from PyQt6.QtWidgets import QApplication, QMainWindow, QLabel,QFrame, QVBoxLayout,QWidget, QGridLayout,QScrollArea,QHBoxLayout
from PyQt6.QtCore import QBasicTimer,Qt, QMimeData
from PyQt6.QtGui import QDrag


class DpLabel(QLabel):
    def __init__(self, numero, tableau=None):
        super().__init__(numero,tableau)
        self.timer = QBasicTimer()
        self.tableau = tableau
        self.setStyleSheet("border: none;")
        self.setAcceptDrops(True)
        self.initUI(numero)

    def initUI(self,numero):
        self.setText(numero)

    def timerEvent(self, event):
        self.timer.stop()
 
    def mousePressEvent(self, event):
        if event.button() == Qt.MouseButton.LeftButton:
            if self.timer.isActive():
                self.actionDblClick(self.text())
                self.timer.stop()
            else:
                self.timer.start(250, self)
                drag = QDrag(self)
                mime_data = QMimeData()
                mime_data.setText(self.text())
                drag.setMimeData(mime_data)
                drag.exec(Qt.DropAction.MoveAction)

    def dragEnterEvent(self, event):
        if event.mimeData().hasText():
            event.acceptProposedAction()

    def dropEvent(self, event):
        self.setText(event.mimeData().text())

    def actionDblClick(self,text):
        print(text)


class Cellule(QFrame):
    def __init__(self,numero,coulNiv,tableau=None):
        super().__init__(tableau)
        self.tableau = tableau
        self.setStyleSheet(f"color: red; border: 1px solid red;")
        self.initUI(numero,coulNiv)

    def initUI(self,numero,coulNiv):        
        self.label = DpLabel(numero,self.tableau)
        self.label.setAlignment(Qt.AlignmentFlag.AlignCenter)
        layout = QVBoxLayout()
        layout.addWidget(self.label)
        self.setLayout(layout)  


# Base du tableau----------------------------------------------------------------------------------
class TableauPop(QMainWindow):
    "Mise en place de la base pour la construction du tableau"
    def __init__(self):
        super().__init__()
        self.setObjectName("TableauPop")
        self.setWindowTitle("Tableau population MA")
        self.cellule = {}
        self.setupUi()
        
    def setupUi(self):
        self.centralwidget = QWidget(parent=self)
        self.horizontalLayout = QHBoxLayout(self.centralwidget)
        self.horizontalLayout.setContentsMargins(0, 0, 0, 0)
        self.horizontalLayout.setSpacing(0)
        self.zoneScroll = QScrollArea(parent=self.centralwidget)
        self.zoneScroll.setStyleSheet("border: none;")
        self.zoneScroll.setWidgetResizable(True)
        self.scrollAreaWidgetContents = QWidget()
        self.scrollAreaWidgetContents.setGeometry(QtCore.QRect(0, 0, 1280, 1024))
        self.scrollAreaWidgetContents.setMinimumSize(QtCore.QSize(1280, 1024))
        self.tableau = QGridLayout(self.scrollAreaWidgetContents)

        self.dictCellule = {}  # Dictionnaire pour stocker les cellules (qframe)
        premierLigne=["21","23","25", "27", "29", "31", "33", "35", "37", "39", "41", "43", "niv", "38", "36", "34", "32", "30", "28", "26", "24", "22"]
        deuxiemeLigne=["19", "17", "15", "13", "11", "09", "07", "05", "03", "01", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20"]
        annexeLigne=["23", "21", "19", "17", "15", "13", "11", "09", "07", "05", "03", "01", "popaxe", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22", "24"]      

        for niveau in range(1,9):#9
            if niveau==1:
                col=0
                lig=0
            elif niveau==2:
                col=0
                lig=3
            elif niveau==3:
                col=0
                lig=6
            elif niveau==4:
                col=0
                lig=9
            elif niveau==5:
                col=26#29
                lig=0
            elif niveau==6:
                col=26
                lig=3
            elif niveau==7:
                col=26
                lig=6
            elif niveau==8:
                col=26
                lig=9
            
            
            cpt=0
            #premiere rangee ----------------------------------------------------------------------
            for num in premierLigne:
                if num=="niv":
                    separation = QFrame()
                    separation.setFrameShape(QFrame.Shape.VLine)
                    separation.setStyleSheet(f"border: 3px dashed purple;")
                    self.tableau.addWidget(separation, lig, col+cpt, 1, 1)
                    cpt+=1
                cell = Cellule(f"{num}","red",self)
                self.tableau.addWidget(cell,lig,col+cpt,1,1)
                self.dictCellule[f"{num}"] = cell
                cpt+=1

            cell = Cellule("00","red",self)
            self.tableau.addWidget(cell,lig,col+cpt,1,2)
            self.dictCellule["00"] = cell

            # deuxieme rangee ---------------------------------------------------------------------
            cell = Cellule("A","red",self)
            self.tableau.addWidget(cell,lig+1,col,1,2)
            self.dictCellule["A"] = cell
            
            cpt=2
            for num in deuxiemeLigne:
                if num=="02":
                    separation = QFrame()
                    separation.setFrameShape(QFrame.Shape.VLine)
                    separation.setStyleSheet(f"border: 3px dashed purple;")
                    self.tableau.addWidget(separation, lig+1, col+cpt, 1, 1)
                    cpt+=1
                cell = Cellule(f"{num}","red",self)
                self.tableau.addWidget(cell,lig+1,col+cpt,1,1)
                self.dictCellule[f"{num}"] = cell
                cpt+=1

            cell = Cellule("B","red",self)
            self.tableau.addWidget(cell,lig+1,col+cpt,1,2)
            self.dictCellule["B"] = cell
            
            separation = QFrame()
            separation.setFrameShape(QFrame.Shape.HLine)
            separation.setStyleSheet(f"border: 3px solid purple;")
            self.tableau.addWidget(separation, lig+2, 0, 1, 51)
            separation = QFrame()
            separation.setFrameShape(QFrame.Shape.VLine)
            separation.setStyleSheet(f"border: 3px solid purple;")
            self.tableau.addWidget(separation, 0, 25, 11, 1)

        self.zoneScroll.setWidget(self.scrollAreaWidgetContents)
        self.horizontalLayout.addWidget(self.zoneScroll)
        self.setCentralWidget(self.centralwidget)


#----------------------------------------------------------------------------------------------------------------------
#----------------------------------------------------------------------------------------------------------------------
#----------------------------------------------------------------------------------------------------------------------
if __name__ == "__main__":
    app = QApplication.instance() 
    app = QApplication(sys.argv)
    TableauPop = TableauPop()
    TableauPop.showMaximized()
    app.exec()

**fred1599** · 12/06/2024, 14h18

Bonjour,

Envoyé par darphil

Dans la capture, on vois que "A" et "B" malgré" avoir mis colspan à 2 elles n'ont pas la même dimensions et je ne trouve pas ça fort beaux.

Oui je vois, mais ça me semble compliqué à gérer cela, c'est une adaptation automatique de la largeur de la cellule. À moins de fixer une valeur pour la largeur de tes colonnes, je vois pas de solution.

**papajoker** · 12/06/2024, 15h13

bonjour

Donc ton code n'a rien à voir avec ta copie écran, c'est juste un code pour créer une "grille" incluse elle-même dans une grille ?
Et tu n'as aucun problème Qt, ton problème est en fait l'algo pour créer et placer les objets "cellule"

Ton code me parait bien top statique.
On n'a aucune idée d'où viennent ces contraintes de grille donc difficile de donner une réponse Et aucune idée de l'utilisation finale de cette grille

Une structure (si c'est le problème) qui me parait beaucoup plus simple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
sub_grille = [
    [("21",1, datax), ("A",2,), ("25",1,),],
    [("26",1, datay), ("25",1, dataz), ("B",2,), ]
]
# eventuellement sub_grille_sizes = {"A": 2, "B":2}
# ou, cellule est une class sub_grille = [ [Cell("21", datax), Cell("A",None, 2),], ... ]
 
for y,ligne in enumerate(sub_grille):
    for x, cellule in enemerate(ligne):
        # cellule est par exemple ("25",1, dataz)
        # ou ? # size = sub_grille_sizes.get(cellule[0], 1)
        # créer un objet QT ou un objet perso ? cela dépend de l'utilisation de la grille
        cel = créer_cellule_qt(x, y, size=cellule[1], label=cellule[0], data_sans_doute=cellule[3]) 
        #self.tableau.addWidget(cel, y, x, 1, cellule[1])

**darphil** · 13/06/2024, 21h16

Je crois que j'ai trouvé.

J'ai supprimé les espaces entre les qframes dans Tableaupop ( self.tableau.setSpacing(0) )

J'ai supprimé les bordures des qframes.
Et j'ai mis des marges à ce même qframe ( layout.setContentsMargins(3, 3,3, 3) )

Et en dernier, j'ai mis les bordures a qlabel.

J'ai encore une différence de 1 pixel, mais cela se vois beaucoup moins.

Cela a l'air de fonctionner.

Nom : tab3.jpg
Affichages : 128
Taille : 13,5 Ko

Nom : tab3.jpg
Affichages : 128
Taille : 13,5 Ko

Plus de deux semaines que je me casse la tête. 😣

[PYQT6] Mise en page d'une grille

Python

Vue hybride

Discussions similaires

Partager

Partager