如何在 PyQt5 中覆盖小部件? [英] How to overlay widgets in PyQt5?

问题描述

我想在包含图像小部件的背景布局上呈现一些布局 - 将一些小部件分组.

I would like to render some layouts - that groups some widgets - over a background layout that contains an image widget.

让我用一张图片来解释我自己.下图显示了所需的输出:

Let me explain myself with an image. The following image shows the desired output:

但是，我还没有找到覆盖两个图像小部件的方法，它们显示如下:

However, all I haven't find the way to overlay the two image widgets, and they show like this:

这是我写的 Python 代码:

And this is the Python code I wrote:

from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5 import QtCore, Qt
import sys


class ExampleWindow(QMainWindow):
    def __init__(self, windowsize):
        super().__init__()
        self.windowsize = windowsize
        self.initUI()

    def initUI(self):
        self.setGeometry(0, 0, self.windowsize.width(), self.windowsize.height())
        self.setMaximumSize(self.windowsize.width(), self.windowsize.height())
        self.setMinimumSize(self.windowsize.width(), self.windowsize.height())
        self.setWindowFlags(QtCore.Qt.CustomizeWindowHint | QtCore.Qt.FramelessWindowHint)

        widget = QWidget()
        self.setCentralWidget(widget)

        # Picture 1's widget
        pixmap = QPixmap('picture_1.jpg')
        pixmap = pixmap.scaledToWidth(self.windowsize.width())
        self.image = QLabel()
        self.image.setPixmap(pixmap)
        left_box = QVBoxLayout()
        left_box.setContentsMargins(0,0,0,0)
        left_box.setSpacing(0)
        left_box.setAlignment(Qt.Qt.AlignLeft)
        left_box.addWidget(self.image, 0, Qt.Qt.AlignLeft | Qt.Qt.AlignTop)

        # Picture 2's widget
        pixmap = QPixmap('picture_2.jpg')
        pixmap = pixmap.scaledToWidth(400)
        self.image2 = QLabel()
        self.image2.setPixmap(pixmap)
        right_box = QVBoxLayout()
        right_box.setContentsMargins(0, 0, 0, 0)
        right_box.setSpacing(0)
        right_box.setAlignment(Qt.Qt.AlignLeft)
        right_box.addWidget(self.image2, 0, Qt.Qt.AlignLeft | Qt.Qt.AlignBottom)

        layout_box = QHBoxLayout()
        layout_box.addLayout(left_box)
        layout_box.addLayout(right_box)

        widget.setLayout(layout_box)



if __name__ == '__main__':
    app = QApplication(sys.argv)
    screensize = app.desktop().availableGeometry()

    ex = ExampleWindow(screensize)
    ex.show()

sys.exit(app.exec_())

能否请您帮我修改我的代码，以使小部件如第一张图片所示重叠?

Could you please help me to modify my code in order to get the widgets overlaid as shown on first image?

推荐答案

布局是管理小部件几何形状的元素，在您的情况下，两种布局都试图占据最大的可用空间.对于要成为另一个小部件的一部分的小部件有两种可能性，第一种是使用布局，第二种是主小部件是新小部件的父亲，在第一个图像的情况下，我们将使用第一个一个，对于第二个，我们将使用第二种方法.

Layouts are elements that manage the geometry of widgets, in your case both layouts try to occupy the largest available space. For a widget to be part of another widget there are 2 possibilities, the first is to use a layout, and the second is that the main widget is the father of the new widget, in the case of the first image we will use the first one, and for the second one we will use the second method.

from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *
import sys


class ExampleWindow(QMainWindow):
    def __init__(self, windowsize):
        super().__init__()
        self.windowsize = windowsize
        self.initUI()

    def initUI(self):
        self.setFixedSize(self.windowsize)
        self.setWindowFlags(Qt.CustomizeWindowHint | Qt.FramelessWindowHint)

        widget = QWidget()
        self.setCentralWidget(widget)
        pixmap1 = QPixmap('picture_1.jpg')
        pixmap1 = pixmap1.scaledToWidth(self.windowsize.width())
        self.image = QLabel()
        self.image.setPixmap(pixmap1)

        layout_box = QHBoxLayout(widget)
        layout_box.setContentsMargins(0, 0, 0, 0)
        layout_box.addWidget(self.image)

        pixmap2 = QPixmap('picture_2.jpg')
        self.image2 = QLabel(widget)
        self.image2.setPixmap(pixmap2)
        self.image2.setFixedSize(pixmap2.size())

        p = self.geometry().bottomRight() - self.image2.geometry().bottomRight() - QPoint(100, 100)
        self.image2.move(p)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    screensize = app.desktop().availableGeometry().size()

    ex = ExampleWindow(screensize)
    ex.show()

sys.exit(app.exec_())

这篇关于如何在 PyQt5 中覆盖小部件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！