Your First QtQuick/QML Application

QML is a declarative language that lets you develop applications faster than with traditional languages. It is ideal for designing the UI of your application because of its declarative nature. In QML, a user interface is specified as a tree of objects with properties. In this tutorial, we will show how to make a simple “Hello World” application with PySide6 and QML.

A PySide6/QML application consists, mainly, of two different files - a file with the QML description of the user interface, and a python file that loads the QML file.

Here is a simple QML file called Main.qml:

import QtQuick

Rectangle {
    id: main
    width: 200
    height: 200
    color: "green"

    Text {
        text: "Hello World"
        anchors.centerIn: main
    }
}

We start by importing QtQuick, which is a QML module.

The rest of the QML code is pretty straightforward for those who have previously used HTML or XML files. Basically, we are creating a green rectangle with the size 200*200, and adding a Text element that reads “Hello World”. The code anchors.centerIn: main makes the text appear centered within the object with id: main, which is the Rectangle in this case.

Put the file into into a directory named App along with a file named qmldir to describe a basic QML module:

module App
Main 254.0 Main.qml

Now, let’s see how the code looks on the PySide6. Let’s call it main.py:

import sys
from PySide6.QtGui import QGuiApplication
from PySide6.QtQuick import QQuickView

if __name__ == "__main__":
    app = QGuiApplication()
    view = QQuickView()
    view.engine().addImportPath(sys.path[0])
    view.loadFromModule("App", "Main")
    view.show()
    ex = app.exec()
    del view
    sys.exit(ex)

If you are already familiar with PySide6 and have followed our tutorials, you have already seen much of this code. The only novelties are that you must import QtQuick, add the directory to the import paths, and instruct the QQuickView to load our module. Then, similar to what you do with any Qt widget, you call QQuickView.show().

Note

If you are programming for desktop, you should consider adding view.setResizeMode(QQuickView.SizeRootObjectToView) before showing the view.

When you execute the main.py script, you will see the following application: