QML Application Tutorial

This tutorial provides a quick walk-through of a python application that loads a QML file. QML is a declarative language that lets you design UIs faster than a traditional language, such as C++. The QtQml and QtQuick modules provides the necessary infrastructure for QML-based UIs.

In this tutorial, you’ll also learn how to provide data from Python as a QML context property, which is then consumed by the ListView defined in the QML file.

Before you begin, install the following prerequisites:

The following step-by-step instructions guide you through application development process using Qt Creator:

  1. Open Qt Creator and select File > New File or Project.. menu item to open following dialog:

    ../../_images/newpyproject.png
  2. Select Qt for Python - Empty from the list of application templates and select Choose.

    ../../_images/pyprojname.png
  3. Give a Name to your project, choose its location in the filesystem, and select Finish to create an empty main.py and main.pyproject.

    ../../_images/pyprojxplor.png

    This should create a main.py and `main.pyproject files for the project.

  4. Download view.qml and logo.png and move them to your project folder.

  5. Double-click on main.pyproject to open it in edit mode, and append view.qml and logo.png to the files list. This is how your project file should look after this change:

    {
        "files": ["main.py", "view.qml", "logo.png"]
    }
    
  6. Now that you have the necessary bits for the application, import the Python modules in your main.py, and download country data and format it:

     1
     2#!/usr/bin/env python
     3# -*- conding: utf-8 -*-
     4
     5import os
     6import sys
     7import urllib.request
     8import json
     9from pathlib import Path
    10
    11import PySide6.QtQml
    12from PySide6.QtQuick import QQuickView
    13from PySide6.QtCore import QStringListModel, Qt, QUrl
    14from PySide6.QtGui import QGuiApplication
    15
    16
    17if __name__ == '__main__':
    18
    19    #get our data
    20    url = "http://country.io/names.json"
    21    response = urllib.request.urlopen(url)
    
  7. Now, set up the application window using PySide6.QtGui.QGuiApplication, which manages the application-wide settings.

     1
     2#!/usr/bin/env python
     3# -*- conding: utf-8 -*-
     4
     5import os
     6import sys
     7import urllib.request
     8import json
     9from pathlib import Path
    10
    11import PySide6.QtQml
    12from PySide6.QtQuick import QQuickView
    13from PySide6.QtCore import QStringListModel, Qt, QUrl
    14from PySide6.QtGui import QGuiApplication
    15
    16
    17if __name__ == '__main__':
    18
    19    #get our data
    20    url = "http://country.io/names.json"
    21    response = urllib.request.urlopen(url)
    22    data = json.loads(response.read().decode('utf-8'))
    23
    24    #Format and sort the data
    25    data_list = list(data.values())
    26    data_list.sort()
    

    Note

    Setting the resize policy is important if you want the root item to resize itself to fit the window or vice-a-versa. Otherwise, the root item will retain its original size on resizing the window.

  8. You can now expose the data_list variable as a QML context property, which will be consumed by the QML ListView item in view.qml.

     1
     2#!/usr/bin/env python
     3# -*- conding: utf-8 -*-
     4
     5import os
     6import sys
     7import urllib.request
     8import json
     9from pathlib import Path
    10
    11import PySide6.QtQml
    12from PySide6.QtQuick import QQuickView
    13from PySide6.QtCore import QStringListModel, Qt, QUrl
    14from PySide6.QtGui import QGuiApplication
    15
    16
    17if __name__ == '__main__':
    18
    19    #get our data
    20    url = "http://country.io/names.json"
    21    response = urllib.request.urlopen(url)
    22    data = json.loads(response.read().decode('utf-8'))
    23
    24    #Format and sort the data
    25    data_list = list(data.values())
    26    data_list.sort()
    27
    28    #Set up the application window
    29    app = QGuiApplication(sys.argv)
    30    view = QQuickView()
    31    view.setResizeMode(QQuickView.SizeRootObjectToView)
    
  9. Load the view.qml to the QQuickView and call show() to display the application window.

     1
     2#!/usr/bin/env python
     3# -*- conding: utf-8 -*-
     4
     5import os
     6import sys
     7import urllib.request
     8import json
     9from pathlib import Path
    10
    11import PySide6.QtQml
    12from PySide6.QtQuick import QQuickView
    13from PySide6.QtCore import QStringListModel, Qt, QUrl
    14from PySide6.QtGui import QGuiApplication
    15
    16
    17if __name__ == '__main__':
    18
    19    #get our data
    20    url = "http://country.io/names.json"
    21    response = urllib.request.urlopen(url)
    22    data = json.loads(response.read().decode('utf-8'))
    23
    24    #Format and sort the data
    25    data_list = list(data.values())
    26    data_list.sort()
    27
    28    #Set up the application window
    29    app = QGuiApplication(sys.argv)
    30    view = QQuickView()
    31    view.setResizeMode(QQuickView.SizeRootObjectToView)
    32
    33    #Expose the list to the Qml code
    34    my_model = QStringListModel()
    35    my_model.setStringList(data_list)
    36    view.rootContext().setContextProperty("myModel", my_model)
    37
    38    #Load the QML file
    39    qml_file = Path(__file__).parent / "view.qml"
    40    view.setSource(QUrl.fromLocalFile(os.fspath(qml_file.resolve())))
    
  10. Finally, execute the application to start the event loop and clean up.

     1
     2#!/usr/bin/env python
     3# -*- conding: utf-8 -*-
     4
     5import os
     6import sys
     7import urllib.request
     8import json
     9from pathlib import Path
    10
    11import PySide6.QtQml
    12from PySide6.QtQuick import QQuickView
    13from PySide6.QtCore import QStringListModel, Qt, QUrl
    14from PySide6.QtGui import QGuiApplication
    15
    16
    17if __name__ == '__main__':
    18
    19    #get our data
    20    url = "http://country.io/names.json"
    21    response = urllib.request.urlopen(url)
    22    data = json.loads(response.read().decode('utf-8'))
    23
    24    #Format and sort the data
    25    data_list = list(data.values())
    26    data_list.sort()
    27
    28    #Set up the application window
    29    app = QGuiApplication(sys.argv)
    30    view = QQuickView()
    31    view.setResizeMode(QQuickView.SizeRootObjectToView)
    32
    33    #Expose the list to the Qml code
    34    my_model = QStringListModel()
    35    my_model.setStringList(data_list)
    36    view.rootContext().setContextProperty("myModel", my_model)
    37
    38    #Load the QML file
    39    qml_file = Path(__file__).parent / "view.qml"
    40    view.setSource(QUrl.fromLocalFile(os.fspath(qml_file.resolve())))
    41
    42    #Show the window
    43    if view.status() == QQuickView.Error:
    44        sys.exit(-1)
    45    view.show()
    46
    47    #execute and cleanup
    48    app.exec()
    49    del view
    
  11. Your application is ready to be run now. Select Projects mode to choose the Python version to run it.

    ../../_images/projectsmode.png

Run the application by using the CTRL+R keyboard shortcut to see if it looks like this:

../../_images/qmlapplication.png

You could also watch the following video tutorial for guidance to develop this application: