PyQt Intro to Widgets Part 1

Widgets are the core of what you’ll use in PyQt.  They are the interface elements that display information and respond to user interaction.  All widgets are descended from QWidget and are found in the PyQt5.QtWidgets module.  Over the course of the next couple of articles, we’re going to take a look at some of the basic input widgets, a couple that are specific to the project that we’re building as part of this series and then talk a little about how windows work in Qt.

Before we get started, it’s important to note that you must always create an instance of QApplication before instantiating any Qt object which ‘paints’ on the screen – not doing so will raise an exception.  For this article, we’re just going to modify the app.py file since we’re just experimenting at this stage.

String Editing Widgets

There are a few of string editing widgets in Qt.  We’re going to talk about two now which are differentiated by the length of text that they are used for –

  • QLineEdit is used for single-line, plain text strings and is also used for password input fields as you can specify an echo mode
  • QPlainTextEdit is used for multi-line plain text

Lets take a look at some code –

import sys

from PyQt5.QtWidgets import QApplication, QLineEdit, QPlainTextEdit

# try to import resources - this may throw an error as
# the scaffold doesn't start with any resources
try:
    from .resources import icons
except ImportError:
    pass

# create a qt application passing command line args
# docs - http://doc.qt.io/qt-5/qapplication.html
app = QApplication(sys.argv)

# --- code to bootstrap project goes here

line_edit = QLineEdit()
line_edit.setText('QLineEdit')
line_edit.show()

text_edit = QPlainTextEdit()
text_edit.setPlainText('QPlainTextEdit')
text_edit.show()

# start event loop
sys.exit(app.exec_())

Note that we’re directly editing the app.py file as I mentioned above and I’ve highlighted the changes or added lines.  The text of both widgets has been set in order to make it apparent what you’re looking at when you run the code.

You’ll notice that the method to set the text on these two widgets is different – you will need to get used to looking up the Qt5 class reference to find the methods you need to perform any given task.  If you have looked through the linked class docs, you might have noticed that the show method is not listed in either of the method lists for the two objects and that’s because the show method is in fact a member of the QWidget class that all widgets are subclasses of (just like I said at the very start of the article). It’s useful to have the QWidget docs open to reference as well – you can find them here http://doc.qt.io/qt-5/qwidget.html

Now have a go at turning your QLineEdit into a password editor.

Check the documentation for setEchoMode
http://doc.qt.io/qt-5/qlineedit.html#echoMode-prop

line_edit = QLineEdit()
line_edit.setText('QLineEdit')
line_edit.setEchoMode(QLineEdit.Password)
line_edit.show()

Number Editing Widgets

There are a lot of number related widgets in Qt including sliders, dials and other kinds of graphical representations.  At the moment we’re just going to take a look at the two most commonly used ones –

If you take a look at these two class reference pages, you’ll note that the API for interacting with them is largely the same and that’s because they both do exactly thing with one exception – QSpinBox is used for integers and thus has functionality like changing bases and QDoubleSpinBox is used for floating point numbers and has some additional functionality for setting decimal places etc.

import sys

from PyQt5.QtWidgets import QApplication, QSpinBox, QDoubleSpinBox

# try to import resources - this may throw an error as
# the scaffold doesn't start with any resources
try:
    from .resources import icons
except ImportError:
    pass

# create a qt application passing command line args
# docs - http://doc.qt.io/qt-5/qapplication.html
app = QApplication(sys.argv)

# --- code to bootstrap project goes here

spin_box = QSpinBox()
spin_box.show()

dbl_spin_box = QDoubleSpinBox()
dbl_spin_box.show()

# start event loop
sys.exit(app.exec_())

This code is very similar from our code to create string widgets – and indeed, that’s largely the case for creating any simple widget.  Be aware that when you run this both windows may show up in exactly the same place making it appear as though only the QDoubleSpinBox. Just move the top widget and you’ll find the other one.

Now have a look through the class documentation and turn the QDoubleSpinBox into a currency($) editor.

Check the documentation for setPrefix
http://doc.qt.io/qt-5/qspinbox.html#prefix-prop

dbl_spin_box = QDoubleSpinBox()
dbl_spin_box.setPrefix('$')
dbl_spin_box.show()

Note that there is a counterpart to this method setSuffix which puts the supplied string after the number. You could use this to create something like a percentage editor.

dbl_spin_box = QDoubleSpinBox()
dbl_spin_box.setSuffix('%')
dbl_spin_box.show()

And we’ll leave it there for now.  In the next article we’ll look at some more commonly used widgets like select boxes and date/time widgets.

Leave a Reply

Your email address will not be published. Required fields are marked *