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 initial property, which is then consumed by the ListView defined in the QML file.

Before you begin, install the following prerequisites:

• The PySide6 Python packages.

• Qt Creator v4.9 beta1 or later from http://download.qt.io.

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:

   

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

   

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.

   

   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:

   
   import sys
   import urllib.request
   import json
   from pathlib import Path
   
   from PySide6.QtQuick import QQuickView
   from PySide6.QtCore import QStringListModel, QUrl
   from PySide6.QtGui import QGuiApplication
   
   
   if __name__ == '__main__':
   
       #get our data
       url = "http://country.io/names.json"
       response = urllib.request.urlopen(url)
       data = json.loads(response.read().decode('utf-8'))
   
       #Format and sort the data
       data_list = list(data.values())
       data_list.sort()
   

7. Now, set up the application window using PySide6.QtGui.QGuiApplication, which manages the application-wide settings.

   
   import sys
   import urllib.request
   import json
   from pathlib import Path
   
   from PySide6.QtQuick import QQuickView
   from PySide6.QtCore import QStringListModel, QUrl
   from PySide6.QtGui import QGuiApplication
   
   
   if __name__ == '__main__':
   
       #get our data
       url = "http://country.io/names.json"
       response = urllib.request.urlopen(url)
       data = json.loads(response.read().decode('utf-8'))
   
       #Format and sort the data
       data_list = list(data.values())
       data_list.sort()
   
       #Set up the application window
       app = QGuiApplication(sys.argv)
       view = QQuickView()
       view.setResizeMode(QQuickView.SizeRootObjectToView)
   

   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 initial property, which will be consumed by the QML ListView item in view.qml.

   
   import sys
   import urllib.request
   import json
   from pathlib import Path
   
   from PySide6.QtQuick import QQuickView
   from PySide6.QtCore import QStringListModel, QUrl
   from PySide6.QtGui import QGuiApplication
   
   
   if __name__ == '__main__':
   
       #get our data
       url = "http://country.io/names.json"
       response = urllib.request.urlopen(url)
       data = json.loads(response.read().decode('utf-8'))
   
       #Format and sort the data
       data_list = list(data.values())
       data_list.sort()
   
       #Set up the application window
       app = QGuiApplication(sys.argv)
       view = QQuickView()
       view.setResizeMode(QQuickView.SizeRootObjectToView)
   
       #Expose the list to the Qml code
       my_model = QStringListModel()
       my_model.setStringList(data_list)
       view.setInitialProperties({"myModel": my_model})
   

9. Load the view.qml to the QQuickView and call show() to display the application window.

   
   import sys
   import urllib.request
   import json
   from pathlib import Path
   
   from PySide6.QtQuick import QQuickView
   from PySide6.QtCore import QStringListModel, QUrl
   from PySide6.QtGui import QGuiApplication
   
   
   if __name__ == '__main__':
   
       #get our data
       url = "http://country.io/names.json"
       response = urllib.request.urlopen(url)
       data = json.loads(response.read().decode('utf-8'))
   
       #Format and sort the data
       data_list = list(data.values())
       data_list.sort()
   
       #Set up the application window
       app = QGuiApplication(sys.argv)
       view = QQuickView()
       view.setResizeMode(QQuickView.SizeRootObjectToView)
   
       #Expose the list to the Qml code
       my_model = QStringListModel()
       my_model.setStringList(data_list)
       view.setInitialProperties({"myModel": my_model})
   
       #Load the QML file
       qml_file = Path(__file__).parent / "view.qml"
       view.setSource(QUrl.fromLocalFile(qml_file.resolve()))
   
       #Show the window
       if view.status() == QQuickView.Error:
           sys.exit(-1)
       view.show()
   

10. Finally, execute the application to start the event loop and clean up.

    
    import sys
    import urllib.request
    import json
    from pathlib import Path
    
    from PySide6.QtQuick import QQuickView
    from PySide6.QtCore import QStringListModel, QUrl
    from PySide6.QtGui import QGuiApplication
    
    
    if __name__ == '__main__':
    
        #get our data
        url = "http://country.io/names.json"
        response = urllib.request.urlopen(url)
        data = json.loads(response.read().decode('utf-8'))
    
        #Format and sort the data
        data_list = list(data.values())
        data_list.sort()
    
        #Set up the application window
        app = QGuiApplication(sys.argv)
        view = QQuickView()
        view.setResizeMode(QQuickView.SizeRootObjectToView)
    
        #Expose the list to the Qml code
        my_model = QStringListModel()
        my_model.setStringList(data_list)
        view.setInitialProperties({"myModel": my_model})
    
        #Load the QML file
        qml_file = Path(__file__).parent / "view.qml"
        view.setSource(QUrl.fromLocalFile(qml_file.resolve()))
    
        #Show the window
        if view.status() == QQuickView.Error:
            sys.exit(-1)
        view.show()
    
        #execute and cleanup
        app.exec()
        del view
    

11. Your application is ready to be run now. Select Projects mode to choose the Python version to run it.

    

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

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

Related information

• QML Reference

• Python-QML integration