CODEWITHSUNDEEP
pythonqtpyqtqt-designer
Lorenzo Simonassi
Lorenzo Simonassi

Reputation: 535

How to build Side Bar Menu which shows on mouse hover on pyqt?

I have been trying to build an app which has a dynamic side bar. I am using qtdesigner and pyqt5. I tryed in two ways:

1) Using stylesheet whith hover. But the sidebar (frame) has buttons on it. It happens that when I see the bar I just can see the button which has the mouse on.

stylesheetcode:

QFrame {
                  background-color: rgba(255, 151, 231, 0); 
             }

QFrame:hover {
               background-color:rgba(255, 151, 231, 0.45)
            }

QPushButton {
                color: rgba(0, 0, 0, 0);
                background-color: rgba(255, 151, 231, 0);  
             }

QPushButton:hover {
               background-color:rgba(255, 151, 231, 0.45);
            }

output: (the mouse is over the button)

enter image description here

I know why it happens but I dont know how to solve it.

2) Using Events

Using events I can reach what I want, but I am not sure if I am doing the right thig.

  class TelaPrincipal(QDialog, QMainWindow, Ui_Form):
    def __init__(self, parent=None):
        super(TelaPrincipal, self).__init__(parent)
        QDialog.__init__(self, parent)
        Ui_Form.__init__(self)
        self.setupUi(self)

        # -- Barra lateral esconde esconde --
        # instala esse EventFilter
        qApp.installEventFilter(self)
        QtCore.QTimer.singleShot(0, self.frame.hide)

    def eventFilter(self, source, event):
         # do not hide frame when frame shown
        if qApp.activePopupWidget() is None:
            if event.type() == QtCore.QEvent.MouseMove:
                if self.frame.isHidden():
                    self.frame.show()
                    rect = self.geometry()
                    # set mouse-sensitive zone
                    rect.setHeight(25)
                    if rect.contains(event.globalPos()):
                        self.frame.show()
                else:
                    rect = QtCore.QRect(
                        self.frame.mapToGlobal(QtCore.QPoint(0, 0)),
                        self.frame.size())
                    if not rect.contains(event.globalPos()):
                        self.frame.hide()
            elif event.type() == QtCore.QEvent.Leave and source is self:
                self.frame.hide()
        return QMainWindow.eventFilter(self, source, event)

if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    main = TelaPrincipal()
    main.show()
    sys.exit(app.exec())

What do you suggest me ??

Upvotes: 1

Views: 3886

Answers (1)

Lorenzo SC
Lorenzo SC

Reputation: 175

Spent a little time reading the docs. The simplest way I found was this:

in the class init I installed a filter, then I overide the eventFilter method.

class MainScreen(QMainWindow, QDialog,  Ui_TelaPrincipal):
    def __init__(self, parent=None):
        super(MainScreen, self).__init__(parent)
        QDialog.__init__(self, parent)
        QMainWindow.__init__(self, parent)
        Ui_MainScreen.__init__(self)
        self.setupUi(self)

        # ---- side bar ---- #
        # installs a filter event
        qApp.installEventFilter(self)
        # hide the bar 
        QTimer.singleShot(0, self.plano_barra.hide)

        self.plano_central.setMouseTracking(1)
        self.plano_botao_barra.setMouseTracking(1)
        self.setMouseTracking(1)
        self.plano_principal.setMouseTracking(1)


    def eventFilter(self, source, event):
        if event.type() == QEvent.MouseMove:
            if source == self.plano_botao_barra:
                print("i am over the button")
                self.plano_barra.show()

            if source == self.plano_central:
                print("i am at the main plan")
                self.plano_barra.hide()

        return QMainWindow.eventFilter(self, source, event)

Upvotes: 1

Related Questions