Skip to content

[PyQt5] Tutorial(6) comboBox、BoxLayout

Last Updated on 2021-04-12 by Clay

I think I have introduced a lot of components that can be called easily and are so commonly used in development GUI.

So today I put together the "drop-down menu" and "BoxLayout" that I don't often talk about together, I hope to finish the basic introduction part.

In the future, I think I will still record my experience in developing the interface by using PyQt5. After all, the kind of note is more suitable for blogging than Github.

ComboBox

First I use Qt Designer to create a interface.

Like this

The components used are comboBox and two Labels.

# -*- coding: utf-8 -*-
from PyQt5 import QtWidgets, QtGui, QtCore
from comboBox import Ui_MainWindow
import sys


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


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


Output:

This image has an empty alt attribute; its file name is image-24.png

Since nothing is currently placed, nothing is displayed in the comboBox.

We modified our code:

# -*- coding: utf-8 -*-
from PyQt5 import QtWidgets, QtGui, QtCore
from comboBox import Ui_MainWindow
import sys


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

        # ComboBox
        choices = ['1', '2', '3', '4']
        self.ui.comboBox.addItems(choices)
        self.ui.comboBox.currentIndexChanged.connect(self.display)
        self.display()

    def display(self):
        self.ui.label_2.setText('The number you choose:%s' % self.ui.comboBox.currentText())


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


In the ComboBox section we have set four options: 1, 2, 3, 4

Then we use addItems() to assign this list to the comboBox component.

Use currentIndexChanged() to let the comboBox call the self.display() function each time the option changes.

The function display() of this function is to add the current comboBox option to label_2, let's see the effect.

In this way, the simple menu operation is completed!

BoxLayout

This is actually a very simple part, people who have used Android Studio will be familiar with the concept here.

Box Layout I never plan to explain "gridLayout", I just want to explain the simple "QVBoxLayout" and "QHBoxLayout".

You can understand: "QVBoxLayout" is to make the components arranged in a vertical shape, "QHVBoxLayout" can make the components arranged in a horizontal shape.

Then we can design different component arrangement patterns and implement the adaptive layout format of the window accordingly.

Sample:

We can see that I have set up two layout windows in advance, and then we fill in four PushButtons respectively:
 

Is there any way to understand the meaning of the different arrangement patterns I have mentioned?

Of course, you can fill in different arrangement modes in different layout formats, and make your layout look more beautiful. Let's try it out.

References

Read More

Tags:

Leave a Reply