How to keep everything in the correct position after having hidden widget shown?

Question

I am making a small music player using PyQt6. I want to have the QListWidget hidden before I click on any of the four genre buttons and shown up after the click. You may check the below pictures.

(before):

(what I expected to see after the button is clicked):

After I click on the smile (happy) button, the list appears but not in the right way. My tool buttons are compressed.

(what I see now):

Here is my code.

from PyQt6.QtWidgets import *
from PyQt6.QtGui import *
from PyQt6.QtCore import*
class atmoUI(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()
    def initUI(self):
        super().__init__()
        layout=QVBoxLayout(self)
        atmo_layout=QGridLayout(self)
        self.aggressive=QToolButton(self)
        self.aggressive.setFixedSize(100,100)
        self.aggressive.setIcon(QIcon('./img/aggressive.png'))
        self.aggressive.setIconSize(QSize(100,100))
        self.aggressive.setToolTip('aggressive')
        self.happy=QToolButton(self)
        self.happy.setFixedSize(100,100)
        self.happy.setIcon(QIcon('./img/happy.png'))
        self.happy.setIconSize(QSize(100,100))
        self.happy.setToolTip('happy')
        self.romantic=QToolButton(self)
        self.romantic.setFixedSize(100,100)
        self.romantic.setIcon(QIcon('./img/romantic.png'))
        self.romantic.setIconSize(QSize(100,100))
        self.romantic.setToolTip('romantic')
        self.sad=QToolButton(self)
        self.sad.setFixedSize(100,100)
        self.sad.setIcon(QIcon('./img/sad.png'))
        self.sad.setIconSize(QSize(100,100))
        self.sad.setToolTip('sad')
    
        atmo_layout.addWidget(self.aggressive,0,0)
        atmo_layout.addWidget(self.happy,0,1)
        atmo_layout.addWidget(self.romantic,1,0)
        atmo_layout.addWidget(self.sad,1,1)

        self.play=QPushButton(self)
        self.pause=QPushButton(self)
        self.play.setText('play')
        self.pause.setIcon(QIcon('./img/pause.png'))

        self.songlist=QListWidget(self)

        self.home=QPushButton(self)
        self.home.setText("home")
        self.home.setIcon(QIcon('./img/home.png'))
        layout.addLayout(atmo_layout)
        layout.addWidget(self.songlist)
        layout.addWidget(self.play)
        layout.addWidget(self.pause)
        layout.addWidget(self.home)
        self.play.setVisible(False)
        self.pause.setVisible(False)
        self.songlist.setVisible(False)
        self.setLayout(layout)

I am new to PyQt and I searched for a while but still couldn't find a solution. Does anyone know how to fix this?

Note (unlikely related to the issue): the argument on a layout constructor automatically sets that layout on the given parent, so: 1. atmo_layout should have no arguments: `atmo_layout=QGridLayout()`; 2. since `layout` has been created with the `self` parent, there's no need to call `self.setLayout(layout)`. Also, please add spaces around the equal sign and leave one empty line between functions and classes, as they make your code much more readable. — musicamante, Jul 16 '21 at 17:12

score 1 · Accepted Answer · answered Jul 16 '21 at 21:53

You have a lot of messy and redundant code so I will avoid analyzing it but will only point out a possible implementation.

In this case a QGridLayout can be used without the need for the QVBoxLayout.

from PyQt6.QtWidgets import (
    QApplication,
    QGridLayout,
    QListWidget,
    QPushButton,
    QToolButton,
    QWidget,
)
from PyQt6.QtGui import QIcon
from PyQt6.QtCore import QSize


class Widget(QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)

        self.aggressive_button = self.create_button(
            QIcon("./img/aggressive.png"), QSize(100, 100), "aggressive"
        )
        self.happy_button = self.create_button(
            QIcon("./img/happy.png"), QSize(100, 100), "happy"
        )
        self.romantic_button = self.create_button(
            QIcon("./img/romantic.png"), QSize(100, 100), "romantic"
        )
        self.sad_button = self.create_button(
            QIcon("./img/sad.png"), QSize(100, 100), "sad"
        )
        self.songlist_widget = QListWidget()
        self.play_button = QPushButton(text="play")
        self.pause_button = QPushButton(icon=QIcon("./img/pause.png"))
        self.home_button = QPushButton(text="home", icon=QIcon("./img/home.png"))

        lay = QGridLayout(self)
        lay.addWidget(self.aggressive_button, 0, 0)
        lay.addWidget(self.happy_button, 0, 1)
        lay.addWidget(self.romantic_button, 1, 0)
        lay.addWidget(self.sad_button, 1, 1)
        lay.addWidget(self.songlist_widget, 2, 0, 1, 2)
        lay.addWidget(self.play_button, 3, 0, 1, 2)
        lay.addWidget(self.pause_button, 4, 0, 1, 2)
        lay.addWidget(self.home_button, 5, 0, 1, 2)
        lay.setRowStretch(6, -1)

        self.play_button.hide()
        self.pause_button.hide()
        self.songlist_widget.hide()

        self.resize(self.width(), 400)
        self.setFixedWidth(self.sizeHint().width())

        self.happy_button.clicked.connect(self.handle_happy_clicked)

    def create_button(self, icon, size, tooltip):
        button = QToolButton(icon=icon, iconSize=size)
        button.setFixedSize(size)
        button.setToolTip(tooltip)
        return button

    def handle_happy_clicked(self):
        self.songlist_widget.show()


if __name__ == "__main__":
    app = QApplication([])
    window = Widget()
    window.show()
    app.exec()

How to keep everything in the correct position after having hidden widget shown?

1 Answers1