Qt wiki will be updated on October 12th 2023 starting at 11:30 AM (EEST) and the maintenance will last around 2-3 hours. During the maintenance the site will be unavailable.
Qt for Python Tutorial HelloQML: Difference between revisions
m (CristianMaureiraFredes moved page Hello-World-in-PySide-and-QtQuick to Qt for Python Tutorial HelloQML) |
No edit summary |
||
| Line 1: | Line 1: | ||
= Your first application using PySide and QtQuick/QML = | = Your first application using PySide and QtQuick/QML = | ||
QML is a declarative language designed to describe the user interface of a program: both what it looks like, and how it behaves. In QML, a user interface is specified as a tree of objects with properties. In this tutorial we will show how you can make a simple '''Hello World''' application with | QML is a declarative language designed to describe the user interface of a program: both what it looks like, and how it behaves. | ||
In QML, a user interface is specified as a tree of objects with properties. | |||
In this tutorial we will show how you can make a simple '''Hello World''' application with PySide2 and QML. | |||
A | A PySide2/QML application consists, at least, of two different files - a file with the QML description of the user interface, and a python file which loads the '''qml''' file. | ||
To avoid problems for now, don't forget to save both files in the same directory. | |||
Here is a simple QML file, called '''view.qml''': | Here is a simple QML file, called '''view.qml''': | ||
< | <syntaxhighlight lang="javascript" line='line'> | ||
import QtQuick 1.0 | import QtQuick 1.0 | ||
| Line 20: | Line 16: | ||
width: 200 | width: 200 | ||
height: 200 | height: 200 | ||
color: " | color: "green" | ||
Text { | Text { | ||
| Line 27: | Line 23: | ||
} | } | ||
} | } | ||
</ | </syntaxhighlight> | ||
We start by importing QtQuick | We start by importing QtQuick 2.0, which a separate Qt 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 red rectangle with the size 200*200 and, inside that rectangle, we are adding a Text element which says '''Hello World'''. The code '''anchors.centerIn: parent''' just makes the text appear centered in relation to its immediate parent. | The rest of the QML code is pretty straightforward for those who have previously used HTML or XML files. | ||
Basically, we are creating a red rectangle with the size 200*200 and, inside that rectangle, we are adding a Text element which says '''Hello World'''. | |||
The code '''anchors.centerIn: parent''' just makes the text appear centered in relation to its immediate parent. | |||
Now, let's see how the code looks on the | Now, let's see how the code looks on the PySide2. Let's call it '''main.py''': | ||
< | <syntaxhighlight lang="python" line='line'> | ||
from PySide2.QtWidgets import QApplication | |||
from PySide2.QtQuick import QQuickView | |||
from PySide2.QtCore import QUrl | |||
app = QApplication([]) | |||
view = QQuickView() | |||
url = QUrl("view.qml") | |||
view.setSource(url) | view.setSource(url) | ||
view.show() | view.show() | ||
app.exec_() | |||
</syntaxhighlight> | |||
</ | |||
If you are already familiar with | If you are already familiar with PySide2 and have followed our tutorials, much of this code is already familiar. | ||
The only novelties are that you must import QtQuick and set the source of the QQuickView object to the URL of your QML file. | |||
Then, as any Qt widget, you call '''QQuickView.show()'''. | |||
'''Hint:''' If you are programming for desktop, you should consider adding '''view.setResizeMode( | '''Hint:''' If you are programming for desktop, you should consider adding '''view.setResizeMode(QQuickView.SizeRootObjectToView)''' before showing the view. | ||
This will force the outer QML rectangle to resize along with the outer window. | |||
Revision as of 08:41, 18 April 2018
Your first application using PySide and QtQuick/QML
QML is a declarative language designed to describe the user interface of a program: both what it looks like, and how it behaves. In QML, a user interface is specified as a tree of objects with properties. In this tutorial we will show how you can make a simple Hello World application with PySide2 and QML.
A PySide2/QML application consists, at least, of two different files - a file with the QML description of the user interface, and a python file which loads the qml file. To avoid problems for now, don't forget to save both files in the same directory.
Here is a simple QML file, called view.qml:
import QtQuick 1.0
Rectangle {
width: 200
height: 200
color: "green"
Text {
text: "Hello World"
anchors.centerIn: parent
}
}
We start by importing QtQuick 2.0, which a separate Qt 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 red rectangle with the size 200*200 and, inside that rectangle, we are adding a Text element which says Hello World. The code anchors.centerIn: parent just makes the text appear centered in relation to its immediate parent.
Now, let's see how the code looks on the PySide2. Let's call it main.py:
from PySide2.QtWidgets import QApplication
from PySide2.QtQuick import QQuickView
from PySide2.QtCore import QUrl
app = QApplication([])
view = QQuickView()
url = QUrl("view.qml")
view.setSource(url)
view.show()
app.exec_()
If you are already familiar with PySide2 and have followed our tutorials, much of this code is already familiar.
The only novelties are that you must import QtQuick and set the source of the QQuickView object to the URL of your QML file.
Then, as any Qt widget, you call QQuickView.show().
Hint: If you are programming for desktop, you should consider adding view.setResizeMode(QQuickView.SizeRootObjectToView) before showing the view.
This will force the outer QML rectangle to resize along with the outer window.