Skip to content

[PyQt5] Tutorial(7) hide, show, auto fit window size

Last Updated on 2021-04-12 by Clay

I recently started to want to make a more beautiful interface. So I think I can't place the components casually as before.

Thanks to this, I want to record two very important processing methods today - "How to hide components, show components", "How to make components automatically fit to window size".

How to hide and show components is very easy. It allows us to hide some of our components on the interface. I guess this is usually used on a step-by-step form, and the necessary components are displayed when the user needs it. Of course, this is just my personal thought.

This is a picture I placed, and there are two buttons.

But after I put this GUI full screen, its size still hasn't changed:

This is very troublesome for us to develop the interface; let's take a look at this in the following.

Hide, Show

First of all, I want to briefly mention how to hide our layout components, and how to display the components we hide.

In fact, these two functions are very simple, you can do it with hide() and show().

Let's first take a look at the code for this layout component (converted from PyUIC):

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'resize_blog.ui'
#
# Created by: PyQt5 UI code generator 5.11.3
#
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(840, 573)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.label = QtWidgets.QLabel(self.centralwidget)
        self.label.setGeometry(QtCore.QRect(0, 0, 421, 391))
        self.label.setText("")
        self.label.setPixmap(QtGui.QPixmap("../Board/Image/board02.png"))
        self.label.setObjectName("label")
        self.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton.setGeometry(QtCore.QRect(520, 27, 171, 121))
        self.pushButton.setObjectName("pushButton")
        self.pushButton_2 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_2.setGeometry(QtCore.QRect(520, 170, 171, 121))
        self.pushButton_2.setObjectName("pushButton_2")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 840, 25))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.pushButton.setText(_translate("MainWindow", "DisplayButton"))
        self.pushButton_2.setText(_translate("MainWindow", "ShowPic"))


Then we write a simple Python file to inherit this file.

# -*- coding: utf-8 -*-
from PyQt5 import QtWidgets
from resize_blog import Ui_MainWindow
import sys


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.ui.label.setScaledContents(True)


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


We can see that I just used setScaledContents(True) to automatically scale the image so that the entire image is fully displayed.

Like this.

So today we teach how to hide components. First take the ShowPic button to test.

# -*- coding: utf-8 -*-
from PyQt5 import QtWidgets
from resize_blog import Ui_MainWindow
import sys


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.ui.label.setScaledContents(True)

        # Hide
        self.ui.pushButton_2.hide()


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


Output:

We can see that one button is missing which we hide it.

Then we tested the button to show the original when the button was pressed.

# -*- coding: utf-8 -*-
from PyQt5 import QtWidgets
from resize_blog import Ui_MainWindow
import sys


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.ui.label.setScaledContents(True)

        # Hide
        self.ui.pushButton_2.hide()

        # Event
        self.ui.pushButton.clicked.connect(self.showButtonEvent)

    def showButtonEvent(self):
        self.ui.pushButton_2.show()


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


Output:

After pressing the button:

Our button is appeared!

So, if you are familiar with hide() or show(), you are free to choose whether your component will appear on the window.

Auto fit the window size

It's not easy to make this method feel beautiful. Currently I use Qt Designer directly to make such a GUI.

I have mentioned before that you can only use the arrangement elements of the layout to make the components automatically adapt to the window size. Here I will explain with the example just now.

Give the button component a vertical layout.

And then select the horizontal layout.

Our components are automatically displayed like this. If there is any dissatisfaction with the size of the component, you can change the parameter on the right to make changes.

Then we save it into a UI file, use PyUIC to auto-convert, and execute our code again. (The code does not need to be changed because our interface is separate from the function.)

The results are as follows:

The way it started.

After clicking the button, the second button is automatically generated and arranged vertically according to the original settings.

Then we will fully screen the interface again, this time we will find that the component is stretched according to the window.

Of course, this is not beautiful enough, but it has basically reached the function that the component automatically adapts to the window size. The remaining adjustments are nothing more than adjusting the maximum upper limit and shape of the components.

So, this time the PyQt5 teaching ends.

Read More

Tags:

Leave a Reply