pyqt widgets

Python hosting: Host, run, and code Python in the cloud!

We have various widgets that we can access with PyQT. Including:

Textbox
Combobox
Calendar

For more widgets we suggest using the GUI creation tool covered in the next tutorial.

Related course: Create GUI Apps with PyQt5

Textbox widget
Input fields are present in nearly every application. In PyQT4 an input field can be created using the QLineEdit() function.

#! /usr/bin/env python
# -*- coding: utf-8 -*-
#
import sys
from PyQt4.QtGui import *

# Create an PyQT4 application object.
a = QApplication(sys.argv)

# The QWidget widget is the base class of all user interface objects in PyQt4.
w = QMainWindow()

# Set window size.
w.resize(320, 100)

# Set window title
w.setWindowTitle("PyQT Python Widget!")

# Create textbox
textbox = QLineEdit(w)
textbox.move(20, 20)
textbox.resize(280,40)

# Show window
w.show()

sys.exit(a.exec_())

qt textbox

Combobox
A combobox can be used to select an item from a list.

#! /usr/bin/env python
# -*- coding: utf-8 -*-
#
import sys
from PyQt4.QtGui import *

# Create an PyQT4 application object.
a = QApplication(sys.argv)

# The QWidget widget is the base class of all user interface objects in PyQt4.
w = QMainWindow()

# Set window size.
w.resize(320, 100)

# Set window title
w.setWindowTitle("PyQT Python Widget!")

# Create combobox
combo = QComboBox(w)
combo.addItem("Python")
combo.addItem("Perl")
combo.addItem("Java")
combo.addItem("C++")
combo.move(20,20)

# Show window
w.show()

sys.exit(a.exec_())

qt combobox

Calendar widget
The PyQT4 library has a calendar widget, you can create it using the QCalendarWidget() call.

#! /usr/bin/env python
# -*- coding: utf-8 -*-
#
import sys
from PyQt4.QtGui import *

# Create an PyQT4 application object.
a = QApplication(sys.argv)

# The QWidget widget is the base class of all user interface objects in PyQt4.
w = QMainWindow()

# Set window size.
w.resize(320, 240)

# Set window title
w.setWindowTitle("PyQT Python Widget!")

# Create calendar
cal = QCalendarWidget(w)
cal.setGridVisible(True)
cal.move(0, 0)
cal.resize(320,240)

# Show window
w.show()

sys.exit(a.exec_())

Result:

calendar qt

Download PyQT Code (Bulk Collection)

Back Next

Posted in QT4

2015-05-03

Leave a Reply:

Max Wong • Fri, 29 May 2015

Just pointing out a very minor commenting mistake. In the first example with a text box, the comment says "# Create calendar" instead of "# Create textbox"

Frank • Fri, 29 May 2015

Thanks Max! I updated it :-)

Matt • Tue, 23 Jun 2015

I apologize if you have answered this in the tutorial, but how would you display text on the window? For example, if I wanted to make a simple calculator that let the user input two numbers and display the sum, what would I use to display the sum?

Frank • Tue, 23 Jun 2015

Hi Matt, it depends on how you want to display the text on the window. If you want to display in a textbox you could use the .setText() method.
A textbox is often used in calculators.

import sys
from PyQt4.QtCore import pyqtSlot
from PyQt4.QtGui import *
 
# create our window
app = QApplication(sys.argv)
w = QWidget()
w.setWindowTitle('Textbox example @pythonspot.com')
 
# Create textbox
textbox = QLineEdit(w)
textbox.move(20, 20)
textbox.resize(280,40)

# Set window size. 
w.resize(320, 150)

# Create a button in the window
button = QPushButton('Click me', w)
button.move(20,80)

# Create the actions 
@pyqtSlot()
def on_click():
    textbox.setText("Button clicked.")
 
@pyqtSlot()
def on_press():
    print('pressed')
 
@pyqtSlot()
def on_release():
    print('released')
 
# connect the signals to the slots
button.clicked.connect(on_click)
button.pressed.connect(on_press)
button.released.connect(on_release)
 
# Show the window and run the app
w.show()
app.exec_()

Output:
<img src="https://pythonspot.com/wp-c..." alt="PyQT Textbox"/>

The same principle works with a label:

import sys
from PyQt4.QtCore import pyqtSlot
from PyQt4.QtGui import *
 
# create our window
app = QApplication(sys.argv)
w = QWidget()
w.setWindowTitle('Label example @pythonspot.com')
 
# Create textbox
label = QLabel('Output here.',w)
label.move(20,20)
label.resize(280,40)
label.show()

# Set window size. 
w.resize(320, 150)

# Create a button in the window
button = QPushButton('Click me', w)
button.move(20,80)

# Create the actions 
@pyqtSlot()
def on_click():
    label.setText("Button clicked.")
 
@pyqtSlot()
def on_press():
    print('pressed')
 
@pyqtSlot()
def on_release():
    print('released')
 
# connect the signals to the slots
button.clicked.connect(on_click)
button.pressed.connect(on_press)
button.released.connect(on_release)
 
# Show the window and run the app
w.show()
app.exec_()

Hope that helps.If you have any more questions let me know :-)

Matt • Wed, 24 Jun 2015

That does exactly what I wanted, thank you.

Matt • Fri, 26 Jun 2015

What is the best way to get the size of a widget? I would like to place a button to the right of a combobox I've placed. I'm adding items to the box from a file, so I don't know the length of the strings it holds ahead of time. As the box expands to fit the length of its items I also don't know its size, but I would still like to be able to set the space between the button and the box.

I've tried using combobox.iconSize(), which appears to return a different value than the size of the box.

Frank • Sat, 27 Jun 2015

Hi Matt, you can get the size of a widget using:

print combo.x()
print combo.y() 
print combo.size().width()
print combo.size().height()

Resizing components with components next to it does not seem to be a standard thing for a Qt to do. The code below is a bit of a workaround. The example below shows a combobox with an initial width. When the button is pressed a new item is added and the combobox is resized.

#! /usr/bin/env python
# -*- coding: utf-8 -*-
#
import sys
from PyQt4.QtGui import *
from PyQt4.QtCore import pyqtSlot
from PyQt4.QtCore import QTimer
import time
 
# Create an PyQT4 application object.
a = QApplication(sys.argv)       
 
# The QWidget widget is the base class of all user interface objects in PyQt4.
w = QMainWindow()
 
# Set window size. 
w.resize(340, 100)
 
# Set window title  
w.setWindowTitle("PyQT Python Widget!") 
 
# Create combobox
combo = QComboBox(w)
combo.addItem("Python")
combo.addItem("Perl")
combo.addItem("Java")
combo.addItem("C++")
combo.move(20,20)
combo.setSizePolicy(QSizePolicy.Preferred, QSizePolicy.Expanding)
combo.setSizeAdjustPolicy(QComboBox.AdjustToContents)
combo.setMinimumHeight(combo.height())


# Action when button is pressed
@pyqtSlot()
def on_click():
    startWidth = combo.size().width() 
    combo.addItem("This is a very long element")
    combo.resize(combo.size())
    combo.update()
    combo.repaint()
    qApp.processEvents()
    moveButton()

def moveButton():
    btn.move( combo.x() + combo.size().width() + padding, combo.y())
    btn.repaint()
    #print combo.x() + combo.size().width()
    qApp.processEvents()
    

# Add a button
padding = 5
btn = QPushButton('Pythonspot', w)
btn.setToolTip('Click to quit!')
btn.move( combo.x() + combo.size().width() + padding, combo.y())       
btn.clicked.connect(on_click)

# Create a QTimer. This timer will be a watchdog
# that checks if the combobox has resized.
timer = QTimer()
timer.timeout.connect(moveButton)
timer.start(10)

# Show window
w.show() 
sys.exit(a.exec_())

Output:
<img src="https://pythonspot.com/wp-c..." alt="PyQT"/>
After click:
<img src="https://pythonspot.com/wp-c..." alt="PyQT"/>

Hope that helps. Let me know if you have any questions

Matt • Mon, 29 Jun 2015

Thank you!