PyQt5 макет с кадрами

Question

Привет, товарищи программисты.

В настоящее время работает над графическим интерфейсом пользователя. Я пытаюсь сделать макет из 3 QFrames.

Как видно на скриншоте ниже, рамка желтая находится на правой стороне. Я хотел бы, чтобы этот фрейм был поверх правого кадра. (В верхней части numpad, взяв все горизонтальное пространство)

Кроме того, для кнопок numpad на правой рамке. Я хотел бы, чтобы они были как можно ближе друг к другу, как они могут быть, например, numpad на клавиатуре. Как мне настроить сетку для этого?

Заранее спасибо.

Скриншот:

EDITED Это, как я хочу, чтобы результат будет. Там, где красная рамка - правая рамка (желтая рамка на первом снимке).

Код:

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

Для того кадра, который должен быть под NumPad вы должны поместить их в качестве основы. Чтобы кнопки были вместе, вы должны обнулить пространство в QGridLayout, которое содержит их ({your layout}.setSpacing(0)), в дополнение к добавлению QSpacerItem вокруг QGridLayout. Если у вас возникнут вопросы, я оставлю вам полный код.

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

Выход: