如何在 Qt 中实现多层框架或小部件？

Question

如何在 Qt 中实现这一点，我正在使用 PyQt 和 Qt Designer，但对如何使用分层感到困惑，如下图所示。

• 我想在索引 0 的第一层显示图像或视频，
• 那么索引 2 中的第二层是媒体控件，当鼠标没有移动时可以隐藏，
• 在示例中更改音量时索引 3 中的第 3 层
• 索引 4 中的第 4 层用于通知等。

在 Qt 中可以做到这一点吗？

Answer 1

有一种实现“层”的简单方法 - 您可以在没有任何布局的情况下添加子小部件，并在主机小部件的调整大小事件（使用事件过滤器）上调整大小/移动它们。第一层可以像往常一样以任何布局进行组织。

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

class Layer(QtCore.QObject):
    def __init__(self, host, child, alignment = Qt.AlignLeft, setWidth = False, setHeight = False, parent = None):
        super().__init__(parent)
        self._host = host
        self._child = child
        self._alignment = alignment
        self._setWidth = setWidth
        self._setHeight = setHeight
        child.setParent(host)
        host.installEventFilter(self)

    def eventFilter(self, watched, event):
        if watched != self._host or event.type() != QtCore.QEvent.Resize:
            return False
        hostSize = event.size()
        childSize = self._child.sizeHint()
        alignment = self._alignment
        x = 0
        y = 0
        dWidth = max(0, hostSize.width() - childSize.width())
        dHeight = max(0, hostSize.height() - childSize.height())
        if alignment & Qt.AlignRight:
            x = dWidth
        elif alignment & Qt.AlignHCenter:
            x = dWidth / 2
        if alignment & Qt.AlignVCenter:
            y = dHeight / 2
        elif alignment & Qt.AlignBottom:
            y = dHeight
        width = hostSize.width() if self._setWidth else childSize.width()
        height = hostSize.height() if self._setHeight else childSize.height()
        self._child.setGeometry(x, y, width, height)
        return False

if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    widget = QtWidgets.QWidget()
    label1 = QtWidgets.QLabel("right label")
    label2 = QtWidgets.QLabel("bottom label")
    layer1 = Layer(widget, label1, Qt.AlignRight)
    layer2 = Layer(widget, label2, Qt.AlignBottom | Qt.AlignHCenter, True)
    widget.show()
    sys.exit(app.exec_())

Answer 2

这是极少数不建议使用布局的情况之一，因为可见小部件是“浮动的”，应该可以四处移动。

解决方案是创建一个“容器”小部件，将所有这些控件作为子控件。

然后，一些小部件将需要重新定位和调整大小（例如，控制栏应始终位于底部并占据整个宽度），这可以在resizeEvent() 中实现。

from PyQt5 import QtCore, QtGui, QtWidgets

class ControlBar(QtWidgets.QFrame):
    def __init__(self, parent):
        super().__init__(parent)
        layout = QtWidgets.QVBoxLayout(self)
        self.slider = QtWidgets.QSlider(QtCore.Qt.Horizontal)
        layout.addWidget(self.slider)
        buttons = QtWidgets.QHBoxLayout()
        layout.addLayout(buttons)
        buttons.addWidget(QtWidgets.QToolButton(text='play'))
        buttons.addWidget(QtWidgets.QToolButton(text='stop'))
        buttons.addStretch()


class VolumeWidget(QtWidgets.QFrame):
    def __init__(self, parent):
        super().__init__(parent)
        layout = QtWidgets.QVBoxLayout(self)
        layout.setContentsMargins(2, 2, 2, 0)
        layout.setSpacing(1)
        handle = QtWidgets.QFrame()
        handle.setFixedHeight(12)
        handle.setStyleSheet('''
            QFrame {
                border: 1px solid darkGray;
                border-radius: 2px;
                background: #aa646464;
            }
        ''')
        layout.addWidget(handle)
        volumeLayout = QtWidgets.QHBoxLayout()
        layout.addLayout(volumeLayout)
        for i in range(4):
            volumeLayout.addWidget(QtWidgets.QSlider(QtCore.Qt.Vertical))

    def mousePressEvent(self, event):
        if event.button() == QtCore.Qt.LeftButton:
            self.startPos = event.pos()

    def mouseMoveEvent(self, event):
        if event.buttons() == QtCore.Qt.LeftButton:
            delta = event.pos() - self.startPos
            self.move(self.pos() + delta)


class Notification(QtWidgets.QFrame):
    def __init__(self, parent):
        super().__init__(parent)
        layout = QtWidgets.QHBoxLayout(self)
        self.label = QtWidgets.QLabel('Notification', alignment=QtCore.Qt.AlignCenter)
        layout.addWidget(self.label)


class PlayerWidget(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.video = QtWidgets.QLabel(self)
        self.video.setPixmap(QtGui.QPixmap('movie.png'))
        self.video.setScaledContents(True)
        self.controlBar = ControlBar(self)
        self.notification = Notification(self)
        self.volumeWidget = VolumeWidget(self)
        self.volumeWidget.move(30, 30)

        self.setStyleSheet('''
            VolumeWidget, ControlBar {
                border: 1px outset darkGray;
                border-radius: 4px;
                background: #aad3d3d3;
            }
            VolumeWidget:hover, ControlBar:hover {
                background: #d3d3d3;
            }
            Notification {
                border: 1px outset darkGray;
                border-radius: 4px;
                background: #aa242424;
            }
            Notification QLabel {
                color: white;
            }
        ''')

    def sizeHint(self):
        if self.video.pixmap() and not self.video.pixmap().isNull():
            return self.video.pixmap().size()
        return QtCore.QSize(640, 480)

    def resizeEvent(self, event):
        # set the geometry of the "video"
        videoRect = QtCore.QRect(
            QtCore.QPoint(), 
            self.video.sizeHint().scaled(self.size(), QtCore.Qt.KeepAspectRatio))
        videoRect.moveCenter(self.rect().center())
        self.video.setGeometry(videoRect)

        # control panel
        controlHeight = self.controlBar.sizeHint().height()
        controlRect = QtCore.QRect(0, self.height() - controlHeight, 
            self.width(), controlHeight)
        self.controlBar.setGeometry(controlRect)

        # notification
        notificationWidth = max(self.notification.sizeHint().width(), self.width() * .6)
        notificationRect = QtCore.QRect(
            (self.width() - notificationWidth) * .5, 20, 
            notificationWidth, self.notification.sizeHint().height()
        )
        self.notification.setGeometry(notificationRect)

    def paintEvent(self, event):
        qp = QtGui.QPainter(self)
        qp.fillRect(self.rect(), QtCore.Qt.black)

请注意，在这个简单的例子中，我只使用了一张图片。如果你想播放视频，你应该使用 Qt Multimedia 模块，并且为了正确地获得控件的透明度，必须使用带有 QGraphicsVideoItem 的 QGraphicsView。
在这种情况下，PlayerWidget 可以直接是 QGraphicsView 的子类。