PySide2, looking for a specific class

Heya everyone.

I’m currently working with PySide2 and I can’t manage to find the right class to build this type of UI.
A bar, when it’s opened it shows some more widgets, and when it is closed, it hides everything inside.
Typically what we can see within Maya’s UI.

UIex

I don’t know if it even exists;

Thanks for you help.

Luca.

Think it’s something you will have to create, or at least I felt the need to long ago when I wanted something similar. Want to remember it was groupboxes that I allowed to toggle the contents of.

Something like this ( searched for “groupbox animated toggle qt” ) https://stackoverflow.com/questions/54760970/qt-layout-does-not-reflect-groupbox-size-change

Thank you for your answer.

Yes I thought about using QGroupBox, I did something similar recently, but I really liked the look of the given example from maya’s UI.

I will try to create it myself, and if I can’t manage to achieve the same look, I will stick with the groupBox then.

Thank you again for your response and have a nice week-end !

I believe this has what you are looking for https://stackoverflow.com/questions/32476006/how-to-make-an-expandable-collapsable-section-widget-in-qt/37927256#37927256

1 Like

This is it !! Thank you soo much for your help !!

+1 to just using groupbox

When styled correctly they look exactly like what you want and are much simpler to implement than the other alternatives.
eg
image

1 Like

oooh !! I didn’t even knew it was possible to style the checkbox !!
Would I be able to change the size of the groupBox by using setGeometry() ? Or is there any better way to achive this “shrink” effect ?

Thank you for answers, it helps me a lot !!

Stylesheet for those groupBox is as follows

stylesheet
self.setStyleSheet(
    "QGroupBox {"
    "border: 1px solid;"
    "border-color: rgba(0, 0, 0, 64);"
    "border-radius: 6px;"
    "background-color: rgb(78, 80, 82);"
    "font-weight: bold;"
    "}"
    "QGroupBox::title {"
    "subcontrol-origin: margin;"
    "left: 6px;"
    "top: 4px;"
    "}"
    "QGroupBox::indicator:checked {"
    "image: url(:/arrowDown.png);"
    "}"
    "QGroupBox::indicator:unchecked {"
    "image: url(:/arrowRight.png);"
    "}"
)

The url(:/arrowRight.png) syntax is using the built in Maya Qt resource icons so will look a little different depending on which version of Maya you’re in. (and will need a different implementation outside of Maya)

I don’t use setGeometry() to achieve the dropdown effect, I just add one single (borderless) QWidget as a child of the groupBox, then add all other content to that widget. Connect the toggled signal of the groupBox to the setVisible slot of this widget. You will probably want to override sizeHint on the groupBox and also resize whatever is the parent of the groupBox when toggling.

2 Likes

I have done this before the hard way, where I built a custom widget and drew the arrow myself.

Example:

from PySide2 import QtWidgets, QtCore, QtGui

class Arrow(QtWidgets.QFrame):

    def __init__(self, parent=None):
        super(CollapsibleWidget.Arrow, self).__init__(parent=parent)
        
        # define polygon points when the arrow is facing different directions
        self._vertical_arrow_points = (QtCore.QPointF(7.0, 8.0), QtCore.QPointF(17.0, 8.0), QtCore.QPointF(12.0, 13.0))
        self._horizontal_arrow_points = (QtCore.QPointF(8.0, 7.0), QtCore.QPointF(13.0, 12.0), QtCore.QPointF(8.0, 17.0))

        self._current_points = self._horizontal_arrow_points 
        self.setFixedSize(24, 24)

    def setCollapsed(self, collapsed):
        if collapsed:
            self._current_points= self._horizontal_arrow_points 
        else:
            self._current_points= self._vertical_arrow_points 
        self.repaint()

    def paintEvent(self, event):
        painter = QtGui.QPainter(self)
        painter.begin(self)
        painter.setBrush(QtCore.Qt.white)
        painter.setPen(QtCore.Qt.white)
        painter.drawPolygon(self._current_points)
        painter.end()

Thought this would be helpful in some situations. If you want collapsible sections that look exactly like Maya’s, you have to build custom widgets. I was building a pretty complex UI so I preferred the cleanliness of the result that I was able to get with this method. The code above only gives you the little arrow though, so you still have to build the rest of it with QFrames and handle expanding layouts.

If you can use the group box method for your purposes I’d definitely recommend going that route because it’s less hassle and easier to maintain.