PyQt5 Layout mit Frames

Question

Hallo Kollegen Programmierer.

Derzeit arbeiten auf einer grafischen Benutzeroberfläche. Ich versuche das Layout aus 3 QFrames zu machen.

Wie auf dem Screenshot unten zu sehen, ist der gelbe Frame auf der rechten Seite. Ich möchte, dass dieser Rahmen oben auf dem rechten Rahmen ist. (Oben auf dem Nummernblock, wobei der gesamte horizontale Abstand genommen wird)

Auch für die Nummernblock-Tasten am rechten Rahmen. Ich möchte, dass sie einander so nah sind, wie sie es können, wie eine Nummernblock auf einer Tastatur. Wie würde ich das Raster anpassen, um das zu tun?

Vielen Dank im Voraus.

Screenshot:

EDITED Dies ist, wie ich das Ergebnis sein soll. Der rote Rahmen ist der rechte Rahmen (gelber Rahmen im ersten Bild).

Code:

def layoutUI(self): 

     ### Right Top Frame 
     self.rightTopFrame = QFrame() 
     self.rightTopFrame.resize(1,1) 
     self.rightTopFrame.setStyleSheet("background-color: yellow") 


     ### Left Grid 
     self.leftGrid = QGridLayout() 
     self.leftGrid.setColumnMinimumWidth(10, 10) 
     self.leftGrid.setRowMinimumHeight(1, 1) 

     # Run, Stop, Speed layout 
     self.leftGrid.addWidget(self.b1, 0, 0) 
     self.leftGrid.addWidget(self.b2, 0, 2) 

     self.leftGrid.addWidget(self.b3, 1, 0) 
     self.leftGrid.addWidget(self.l1, 1, 1) 
     self.leftGrid.addWidget(self.b4, 1, 2) 

     # pl (Pieces and Length) layout  
     self.leftGrid.addWidget(self.b5, 2, 0) 
     self.leftGrid.addWidget(self.l2, 2, 1) 
     self.leftGrid.addWidget(self.b6, 2, 2) 

     self.leftGrid.addWidget(self.b7, 3, 0) 
     self.leftGrid.addWidget(self.l3, 3, 1) 
     self.leftGrid.addWidget(self.b8, 3, 2) 

     # Manual 
     self.leftGrid.addWidget(self.l4, 4, 1) 

     self.leftGrid.addWidget(self.b9, 5, 0) 
     self.leftGrid.addWidget(self.b10, 5, 1) 
     self.leftGrid.addWidget(self.b11, 5, 2) 




     ### Right Grid 
     self.rightGrid = QGridLayout() 
     self.rightGrid.setColumnMinimumWidth(0, 0) 
     self.rightGrid.setRowMinimumHeight(1, 1)  



     self.rightGrid.addWidget(self.np1, 2, 0) 
     self.rightGrid.addWidget(self.np2, 2, 1) 
     self.rightGrid.addWidget(self.np3, 2, 2) 
     self.rightGrid.addWidget(self.np4, 3, 0) 
     self.rightGrid.addWidget(self.np5, 3, 1) 
     self.rightGrid.addWidget(self.np6, 3, 2) 
     self.rightGrid.addWidget(self.np7, 4, 0) 
     self.rightGrid.addWidget(self.np8, 4, 1) 
     self.rightGrid.addWidget(self.np9, 4, 2) 
     self.rightGrid.addWidget(self.np0, 5, 1) 
     self.rightGrid.addWidget(self.npCl, 5, 0) 

     #self.rightGrid.addWidget(self.bExit, 0, 2) 




     ### Left Frame 
     self.leftFrame = QFrame() 
     self.leftFrame.resize(150,550) 
     #self.leftFrame.setStyleSheet("background-color: red") 
     self.leftFrame.setLayout(self.leftGrid) 

     ### Right Frame 
     self.rightFrame = QFrame() 
     self.rightFrame.resize(15,50) 
     #self.rightFrame.setStyleSheet("background-color: green") 
     self.rightFrame.setLayout(self.rightGrid) 





     ### Main Grid 
     self.mainGrid = QGridLayout() 
     self.mainGrid.setColumnMinimumWidth(10, 0) 
     self.mainGrid.addWidget(self.leftFrame) 
     self.mainGrid.addWidget(self.rightFrame) 
     self.mainGrid.addWidget(self.rightTopFrame) 


     ### Main Interface 
     self.setGeometry(300, 200, 850, 450) 
     self.setLayout(self.mainGrid) 
     self.setStyleSheet("background-color: %s" % backgroundColor)  
     self.setWindowTitle('Signal & slot') 
     self.show() 

Answer 1

Damit der Rahmen unter dem Numpad sein, Sie sie als Basis stellen müssen. Damit die Schaltflächen zusammen angezeigt werden, müssen Sie das Leerzeichen in QGridLayout, das sie enthält, auf Null setzen ({your layout}.setSpacing(0)). Außerdem müssen Sie QSpacerItem um das QGridLayout hinzufügen. Wenn Sie irgendwelche Fragen haben, überlasse ich Ihnen den vollständigen Code.

import sys 
from itertools import product 

from PyQt5.QtWidgets import QApplication,import QFrame, QGridLayout, QHBoxLayout, QPushButton, QSizePolicy, QSpacerItem, QToolButton, QVBoxLayout, QWidget 


class Widget(QWidget): 
    def __init__(self, parent=None): 
     super(Widget, self).__init__(parent=parent) 
     self.layoutUI() 

    def layoutUI(self): 
     self.setStyleSheet("background-color: brown;") 

     self.principalLayout = QHBoxLayout(self) 

     self.rightFrame = QFrame(self) 
     self.rightFrame.setFrameShape(QFrame.StyledPanel) 
     self.rightFrame.setFrameShadow(QFrame.Raised) 
     self.verticalLayout = QVBoxLayout(self.rightFrame) 
     self.gridLayout = QGridLayout() 

     btns = {(0, 0): "start", (0, 2): "Stop", 
       (1, 0): "Speed-", (1, 1): "1", (1, 2): "Speed+", 
       (2, 0): "Pieces", (2, 1): "0", (2, 2): "Clear", 
       (3, 0): "Length", (3, 1): "0", (3, 2): "Clear", 
       (4, 1): "Manual", 
       (5, 0): "Cut", (5, 1): "Feed", (5, 2): "Clear"} 
     for pos, name in btns.items(): 
      x, y = pos 
      btn = QPushButton(self.rightFrame) 
      btn.setText(name) 
      self.gridLayout.addWidget(btn, x, y) 

     self.verticalLayout.addLayout(self.gridLayout) 
     self.principalLayout.addWidget(self.rightFrame) 

     self.verticalLayoutR = QVBoxLayout() 
     self.verticalLayoutR.setSpacing(0) 
     self.exitFrame = QFrame(self) 
     self.exitFrame.setStyleSheet("background-color: red;") 
     self.exitFrame.setFrameShape(QFrame.StyledPanel) 
     self.exitFrame.setFrameShadow(QFrame.Raised) 
     self.exitverticalLayout = QVBoxLayout(self.exitFrame) 
     self.exitBtn = QPushButton("Exit", self.exitFrame) 
     self.exitverticalLayout.addWidget(self.exitBtn) 
     self.verticalLayoutR.addWidget(self.exitFrame) 

     self.numpadFrame = QFrame(self) 
     self.numpadFrame.setStyleSheet("background-color: yellow;") 
     self.numpadFrame.setFrameShape(QFrame.StyledPanel) 
     self.numpadFrame.setFrameShadow(QFrame.Raised) 
     self.horizontalLayout = QHBoxLayout(self.numpadFrame) 
     spacerItem = QSpacerItem(2, 20, QSizePolicy.Expanding, QSizePolicy.Minimum) 
     self.horizontalLayout.addItem(spacerItem) 
     self.verticalLayout = QVBoxLayout() 
     spacerItem1 = QSpacerItem(20, 57, QSizePolicy.Minimum, QSizePolicy.Expanding) 
     self.verticalLayout.addItem(spacerItem1) 
     self.gridLayout = QGridLayout() 
     self.gridLayout.setSpacing(0) 

     x = (0, 1, 2) 

     coords = list(product(x, x)) 
     coords.append((3, 1)) 

     for coord in coords: 
      x, y = coord 
      button = QPushButton(self.numpadFrame) 
      button.setFixedSize(60, 60) 
      button.setText(str(x + 3 * y + 1)) 
      button.setStyleSheet("background-color: white;") 
      self.gridLayout.addWidget(button, x, y) 
     button.setText("0") 

     self.verticalLayout.addLayout(self.gridLayout) 
     spacerItem2 = QSpacerItem(20, 40, QSizePolicy.Minimum, QSizePolicy.Expanding) 
     self.verticalLayout.addItem(spacerItem2) 
     self.horizontalLayout.addLayout(self.verticalLayout) 
     spacerItem3 = QSpacerItem(2, 20, QSizePolicy.Expanding, QSizePolicy.Minimum) 
     self.horizontalLayout.addItem(spacerItem3) 

     self.verticalLayoutR.addWidget(self.numpadFrame) 

     self.adminFrame = QFrame(self) 
     self.adminFrame.setStyleSheet("background-color: blue;") 
     self.adminFrame.setFrameShape(QFrame.StyledPanel) 
     self.adminFrame.setFrameShadow(QFrame.Raised) 
     self.horizontalLayout = QHBoxLayout(self.adminFrame) 
     spacerItem = QSpacerItem(40, 20, QSizePolicy.Expanding, QSizePolicy.Minimum) 
     self.horizontalLayout.addItem(spacerItem) 
     self.adminBtn = QPushButton("Admin", self.adminFrame) 
     self.horizontalLayout.addWidget(self.adminBtn) 
     self.verticalLayoutR.addWidget(self.adminFrame) 
     self.principalLayout.addLayout(self.verticalLayoutR) 

if __name__ == '__main__': 
    app = QApplication(sys.argv) 
    w = Widget() 
    w.show() 
    sys.exit(app.exec_()) 

Ausgang: