带框架的布局 [英] Layout with frames

问题描述

目前正在研究图形用户界面.我正在尝试使用 3 个 QFrame 进行布局.

Currently working on a graphical user interface. I am trying to make the layout out of 3 QFrames.

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

As seen in the screenshot below, the yellow frame is on the right side. I would like that frame to be on top of the right frame. (On top of the numpad, taking the whole horizontal space)

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

Also, for the numpad buttons on the right frame. I would like them to be as close to each other as they can be, like a numpad on a keyboard. How would I adjust the grid to do that?

已编辑

这就是我想要的结果.其中红框是rightTopFrame(第一张图中的黄框).

This is how I want the outcome to be. Where the red frame is the rightTopFrame (Yellow frame in first picture).

代码:

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

推荐答案

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

In order for the frame to be underneath the numpad you must place them as a base. For the buttons to be together you must zero the space in the QGridLayout that contains them({your layout}.setSpacing(0)), in addition to adding QSpacerItem around the QGridLayout. If you have any questions, I'll leave you the complete code.

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

输出:

这篇关于带框架的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！