pyqt5 - How To implementing multi layer frame or widget in Qt?

Question

How can I implement this in Qt, I am using PyQt and Qt Designer but confusing how to use layering like in the following image.

• I want to first layer in index 0 to show the image or video,
• then the second layer in index 2 is media control which can hide when no move from mouse,
• and layer 3 in index 3 when change the volume in example
• layer 4 in index 4 for notification etc.

is possible to do this in Qt?

question from:https://stackoverflow.com/questions/65856469/how-to-implementing-multi-layer-frame-or-widget-in-qt

Answer 1

There is a simple way to implement "layers" - you can add child widgets without any layout and resize/move them on resize event of host widget (using event filter). First layer can be organized with any layout as usual.

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