带框架的布局

Question

目前正在开发图形用户界面。我正在尝试使用 3 个 QFrame 进行布局。

如下面的屏幕截图所示，黄色框位于右侧。我希望该框架位于右框架之上。 （在小键盘上方，占据整个水平空间）

另外，对于右侧框架上的小键盘按钮。我希望它们尽可能靠近彼此，就像键盘上的小键盘一样。我将如何调整网格来做到这一点？

已编辑

这就是我想要的结果。其中红框是 rightTopFrame（第一张图片中的黄框）。

代码：

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

为了使框架位于数字键盘下方，您必须将它们作为底座放置。为了使按钮在一起，除了在 QGridLayout 周围添加 QSpacerItem 之外，还必须将包含它们的 QGridLayout 中的空间归零（{your layout}.setSpacing(0)）。如果你有任何问题，我会把完整的代码留给你。

import sys
from itertools import product

from PyQt5.QtWidgets import QApplication, 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_())

输出：