ICTPR2 - GUI

T. Issaris

1 Maart 2021

Graphical User Interfaces

Expliciete positionering

Met behulp van de setGeometry() method kunnen we expliciet de positie en grootte van widgets aanpassen.

edit = QtWidgets.QTextEdit("Je naam", wid)
edit.setGeometry(x=10, y=30, w=100, h=100) # Nieuw
edit.show()

Expliciete positionering

Moeilijk voor verschillende scherm en venstergroottes…

  • 1280x768: edit.setGeometry(x=10, y=30, w=200, h=100)
  • 1920x1080: edit.setGeometry(x=20, y=40, w=400, h=200)
  • 4k: edit.setGeometry(x=30, y=50, w=800, h=400)
  • venster 1010x440: ???

Layout Management

Oplossing: Automatisch regelen van de posities en groottes van widgets.

Layout Management

  • QVBoxLayout: vertikaal
  • QHBoxLayout: horizontaal
  • QGridLayout: raster, matrix
  • QFormLayout: label + editbox
  • …

https://doc.qt.io/qt-6/layout.html

QVBoxLayout

We kunnen gebruik maken van de QVBoxLayout() widget om onze layout te vergemakkelijken:

layout = QtWidgets.QVBoxLayout(wid) # Nieuw

button = QtWidgets.QPushButton("Klik op mij")
layout.addWidget(button)  # Nieuw

QVBoxLayout: compleet

De complete code wordt dan:

from PySide6 import QtWidgets

app = QtWidgets.QApplication()
wid = QtWidgets.QWidget()
wid.show()

layout = QtWidgets.QVBoxLayout(wid) # Nieuw

button = QtWidgets.QPushButton("Klik op mij")
layout.addWidget(button)  # Nieuw

edit = QtWidgets.QTextEdit("Je naam")
layout.addWidget(edit)  # Nieuw

app.exec_()

QVBoxLayout: meerdere widgets

We kunnen meerdere widgets aan onze layout toevoegen:

layout = QtWidgets.QVBoxLayout(wid) # Nieuw

button1 = QtWidgets.QPushButton("Knop 1")
layout.addWidget(button1)  # Nieuw

button2 = QtWidgets.QPushButton("Knop 2")
layout.addWidget(button2)  # Nieuw

Deze worden onder elkaar weergegeven.

QVBoxLayout: verschillende widgets

We kunnen ook verschillende soorten widgets aan onze layout toevoegen:

layout = QtWidgets.QVBoxLayout(wid)

button_save = QtWidgets.QPushButton("Opslaan")
layout.addWidget(button_save)

edit_name = QtWidgets.QTextEdit("Je naam")
layout.addWidget(edit_name)

QVBoxLayout: compleet

Een volledig voorbeeld:

from PySide6 import QtWidgets

app = QtWidgets.QApplication()
wid = QtWidgets.QWidget()
wid.show()

layout = QtWidgets.QVBoxLayout(wid) # Nieuw

button = QtWidgets.QPushButton("Klik op mij")
layout.addWidget(button)  # Nieuw

edit = QtWidgets.QTextEdit("Je naam")
layout.addWidget(edit)  # Nieuw

app.exec_()

Oefening 3

Pas je programma uit oefening 2 aan zodat gebruik gemaakt wordt van QVBoxLayout.

QHBoxLayout

QHBoxLayout werkt net als QVBoxLayout maar plaatst de widgets langs elkaar.

from PySide6 import QtWidgets

app = QtWidgets.QApplication()
wid = QtWidgets.QWidget()
wid.show()

layout = QtWidgets.QHBoxLayout(wid) # Nieuw V -> H

button = QtWidgets.QPushButton("Klik op mij")
layout.addWidget(button)  # Onaangepast!

edit = QtWidgets.QTextEdit("Je naam")
layout.addWidget(edit)  # Onaangepast!

app.exec_()

Oefening 4

Pas je programma uit oefening 3 aan zodat gebruik gemaakt wordt van QHBoxLayout.

QGridLayout

QGridLayout werkt net als QVBoxLayout maar je plaatst de widgets langs elkaar op een grid/raster/matrix.

# ...
layout = QtWidgets.QGridLayout(wid) # Nieuw H -> Grid

button = QtWidgets.QPushButton("Klik op mij")
layout.addWidget(button, 0, 0)  # Onaangepast!

edit = QtWidgets.QTextEdit("Je naam")
layout.addWidget(edit, 0, 1)  # Onaangepast!

Oefening 5

Pas je programma uit oefening 4 aan zodat gebruik gemaakt wordt van QGridLayout.

QFormLayout

QFormLayout werkt net als QVBoxLayout maar je nu heb je twee kolommen per rij:

# ...
layout = QtWidgets.QFormLayout(wid) # Nieuw Grid -> Form

label = QtWidgets.QLabel("naam:")
edit = QtWidgets.QTextEdit()
layout.addRow(label, edit)  # Nieuw

label = QtWidgets.QLabel("email:")
edit = QtWidgets.QTextEdit()
layout.addRow(label, edit) # Nieuw

Oefening 6

Pas je programma uit oefening 5 aan zodat gebruik gemaakt wordt van QFormLayout.

Oefening 7

Schrijf een Python programma met Qt dat 3 labels toont, en drie invulvelden. De drie labels geven aan dat je je naam, e-mailadres en telefoonnummer kan ingeven.

Gebruik hiervoor de QFormLayout.

Oefening 8

Voeg twee buttons toe aan de code uit oefening 7: - een klop “Save” - een knop “Cancel”

Oefening 9

Pas de code uit opgave 8 aan zodat als je op “Save” klikt, “opslaan” afgedrukt wordt, en als je op “Cancel” klikt “annulleren”.

Oefening 10

Pas de code uit opgave 9 aan zodat als je op “Save” klikt, de velden opgeslagen worden in een bestand.

// reveal.js plugins