避免 pyqt5 中的 Widget 和 Frame 重叠答案

【问题标题】：Avoid Widget and Frame Overlapping in pyqt5避免 pyqt5 中的 Widget 和 Frame 重叠
【发布时间】：2022-01-11 15:51:21
【问题描述】：

所以我创建了一个新的小部件，我试图将它放在我创建的框架的右侧，但 pyqt 与它们重叠，而不是它自己的小部件工作正常。我也试过 QHboxLayout 和 QVBoxLayout 但他们都没有工作。任何帮助将不胜感激。

import sys
from PyQt5 import QtWidgets,QtGui
from PyQt5.QtWidgets import (QMainWindow, QAction, QApplication, QDesktopWidget,
                             QDialog, QTextEdit, QGridLayout, QPushButton, QWidget,QListWidget,QScrollBar,QListWidgetItem)
class mainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.resize(1280,720)
        tempWidget=QWidget()
        self.setCentralWidget(tempWidget)
        tempFrame=QtWidgets.QFrame()
        self.palette=tempFrame.palette()
        self.palette.setColor(QtGui.QPalette.Window, QtGui.QColor(255,255,255))
        tempFrame.setPalette(self.palette)
        tempFrame.setAutoFillBackground(True)
        box=QtWidgets.QGridLayout()
        box.addWidget(tempFrame,0,0,1,3)
        box.addWidget(someWidget(),0,1,1,1)
        tempWidget.setLayout(box)
        self.show()
class someWidget(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.ribbon = QListWidget()
        self.chat = QTextEdit()
        scroll_bar = QScrollBar()
        scroll_bar.setStyleSheet("background : lightgrey;")
        self.ribbon.setVerticalScrollBar(scroll_bar)
        self.chat.setFixedHeight(
            int((self.chat.fontMetrics().lineSpacing() * 3) +
            (self.chat.document().documentMargin() * 2) +
            (self.chat.frameWidth() * 2) - 1)
            )
        sendBtn = QPushButton('Send')
        sendBtn.clicked.connect(self.Something)

        grid = QGridLayout()
        grid.setSpacing(3)
        grid.addWidget(self.ribbon, 0, 0, 1, 3)
        grid.addWidget(self.chat, 1, 0, 1, 1)
        grid.addWidget(sendBtn, 1, 2)
        grid.setRowStretch(0, 1)
        grid.setColumnStretch(0, 1)

        self.setLayout(grid)
    def Something(self):
        self.ribbon.addItem(QListWidgetItem(self.chat.toPlainText()));self.chat.setText('')

if __name__ == '__main__':
    app = QApplication(sys.argv)
    a=mainWindow()
    sys.exit(app.exec_())

【问题讨论】：

一些不相关但仍然很重要的建议： 1. 类名和常量名应始终大写，而函数和变量应始终以小写字母开头； 2.函数和两个分隔类之间应该总是有一个空行； 3. 始终在用于赋值的等号周围放置空格； 4. 不要使用分号来分隔函数。不要低估所有这些方面，因为它们对于可读性非常很重要（这是必不可少的）。更多内容可以阅读官方Style Guide for Python Code。
是的，我应该把代码写得更具可读性，但这只是我匆忙创建的一个临时示例。但我明白了，我应该这样做。
不应匆忙创建问题，尤其是他们的示例 :-)

标签： python python-3.x pyqt pyqt5

【解决方案1】：

这里缺少的技巧是默认情况下框架会占用很少的空间，直到你用其他小部件填充它。如果您在 Designer 中进行此布局，您可以看到您的框架在表单上，但不会占用太多空间。要解决此问题，您有两种选择：

在框架中添加更多小部件并完成布局
将 QFrame 的 QSizePolicy 更改为 Expanding。您需要将 QSizePolicy 添加到 from PyQt5.QtWidgets 行。

这是第二个选项的代码。

import sys
from PyQt5 import QtWidgets,QtGui
from PyQt5.QtWidgets import (QMainWindow, QAction, QApplication, QDesktopWidget,
                             QDialog, QTextEdit, QGridLayout, QPushButton, QWidget,
                             QSizePolicy, QListWidget,QScrollBar,QListWidgetItem)
class mainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.resize(1280,720)
        tempWidget=QWidget()
        self.setCentralWidget(tempWidget)
        tempFrame=QtWidgets.QFrame()
        self.palette=tempFrame.palette()
        self.palette.setColor(QtGui.QPalette.Window, QtGui.QColor(255,255,255))
        tempFrame.setPalette(self.palette)
        tempFrame.setAutoFillBackground(True)
        tempFrame.setSizePolicy(QSizePolicy.Expanding, QSizePolicy.Expanding)
        box=QtWidgets.QGridLayout()
        box.addWidget(tempFrame,0,0,1,1)
        box.addWidget(someWidget(),0,1,1,1)
        tempWidget.setLayout(box)
        self.show()
class someWidget(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.ribbon = QListWidget()
        self.chat = QTextEdit()
        scroll_bar = QScrollBar()
        scroll_bar.setStyleSheet("background : lightgrey;")
        self.ribbon.setVerticalScrollBar(scroll_bar)
        self.chat.setFixedHeight(
            int((self.chat.fontMetrics().lineSpacing() * 3) +
            (self.chat.document().documentMargin() * 2) +
            (self.chat.frameWidth() * 2) - 1)
            )
        sendBtn = QPushButton('Send')
        sendBtn.clicked.connect(self.Something)

        grid = QGridLayout()
        grid.setSpacing(3)
        grid.addWidget(self.ribbon, 0, 0, 1, 3)
        grid.addWidget(self.chat, 1, 0, 1, 1)
        grid.addWidget(sendBtn, 1, 2)
        grid.setRowStretch(0, 1)
        grid.setColumnStretch(0, 1)

        self.setLayout(grid)
    def Something(self):
        self.ribbon.addItem(QListWidgetItem(self.chat.toPlainText()));self.chat.setText('')

if __name__ == '__main__':
    app = QApplication(sys.argv)
    a=mainWindow()
    sys.exit(app.exec_())

给了

最后一点，我将 tempFrame 的列跨度更改为 1。如果您真的想要 3 列跨度，我认为您需要将 someWidget 放入第 3 列。

【讨论】：

谢谢你，虽然我确实找到了解决这个问题的方法。我在 gridLayout 中添加了列拉伸，并在 someWidget 中将列跨度更改为 6 而不是 3。这就是变化，我也会在答案中放一个完整的版本。 py box.setColumnStretch(0, 2) box.addWidget(tempFrame, 0, 0, 1, 1) box.addWidget(CentralWidget(), 0, 1, 1, 6)

【解决方案2】：

对于任何想知道我如何修复它的人。我在 GridLayout 框中添加了一个 columnStrech 并将小部件列跨度设置为 6。不要问我它是如何工作的，因为我无法回答。

from PyQt5 import QtGui,QtWidgets
import sys
class mainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__()
        self.resize(1280,720)
        tempWidget=QtWidgets.QWidget()
        self.setCentralWidget(tempWidget)
        tempFrame=QtWidgets.QFrame()
        palette=tempWidget.palette()
        palette.setColor(QtGui.QPalette.Window,QtGui.QColor(255,255,0))
        tempFrame.setPalette(palette)
        tempFrame.setAutoFillBackground(True)
        box=QtWidgets.QGridLayout()
        box.setColumnStretch(0, 2)
        box.addWidget(tempFrame, 0, 0, 1, 1)
        box.addWidget(ChatWidget(), 0, 1, 1, 6)
        tempWidget.setLayout(box)
        self.show()

class ChatWidget(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()
    def initUI(self):
        self.chatMessages=QtWidgets.QListWidget()
        self.inputBox=QtWidgets.QTextEdit()
        self.scrollBar=QtWidgets.QScrollBar()
        self.scrollBar.setStyleSheet('background : lightgrey;')
        self.chatMessages.setVerticalScrollBar(self.scrollBar)
        self.inputBox.setFixedHeight(
            int(
                self.inputBox.fontMetrics().lineSpacing()*3+self.inputBox.document().documentMargin()*2+self.inputBox.frameWidth()*2-1
            )
        )
        self.sendButton=QtWidgets.QPushButton('Send')
        self.sendButton.clicked.connect(self.onClick)
        grid=QtWidgets.QGridLayout()
        grid.setSpacing(3)
        grid.addWidget(self.chatMessages, 0, 0, 1, 3)
        grid.addWidget(self.inputBox, 1, 0, 1, 1)
        grid.addWidget(self.sendButton, 1, 2)
        grid.setRowStretch(0, 1)
        grid.setColumnStretch(0, 1)
        self.setLayout(grid)
    def onClick(self):
        msg=self.inputBox.toPlainText()
        if not msg:
            return
        self.chatMessages.addItem(QtWidgets.QListWidgetItem(msg))
        self.inputBox.setText('')
if __name__=='__main__':
    app=QtWidgets.QApplication(sys.argv)
    a=mainWindow()
    sys.exit(app.exec_())

这是最终结果

EndResult

【讨论】：