In this Python PyQt5 lesson we want to learn about Python PyQt5 QtQuick & QML, QtQuick is a feature of PyQt5 by using that you can separate your main design from logic. and QtQuick has its own language that is called QML. QML is Qt Markup Language, it is a language similar to JavaScript but it is not JavaScript. So when you want to work with QtQuick you need to create two files in Pycharm IDE, the first one is a QML file and the second one is a Python file.
Create a file with the .qml extension, i want to call it main.qml and add this code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
import QtQuick.Window 2.2 import QtQuick 2.3 Window { visible:true width:700 height:400 color:"black" title:"Geekscoders.com" Text { id:mytext text:"Geekscoders.com - PyQt5 QML Lesson" color:"white" font.pixelSize:35 font.bold:true anchors.centerIn:parent } Image { id:image source:'python.png' } TextInput { id:textinput text:"Hello" color:"white" font.pixelSize:16; font.bold:true x:200 y:50 focus:true maximumLength:12 font.capitalization:Font.AllUppercase } } |
So in above code first we have our root element that is our window and in the window you can add your other widgets like Text, Image, InputField and etc. also we have some attributes for the window like width and height, window title and color of the window.
Now it is time to load our qml file in python language.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
from PyQt5.QtQml import QQmlApplicationEngine from PyQt5.QtWidgets import QApplication import sys from PyQt5.QtGui import QIcon def run_qml(): app = QApplication(sys.argv) engine = QQmlApplicationEngine() app.setWindowIcon(QIcon('python.png')) engine.load('main.qml') if not engine.rootObjects(): return -1 return app.exec_() if __name__ == "__main__": sys.exit(run_qml()) |
At the top these are the imports.
|
1 2 3 4 |
from PyQt5.QtQml import QQmlApplicationEngine from PyQt5.QtWidgets import QApplication import sys from PyQt5.QtGui import QIcon |
You need to create the object for QApplication and QQmlApplicationEngine.
|
1 2 |
app = QApplication(sys.argv) engine = QQmlApplicationEngine() |
In here we have set the icon for the window, make sure that you have added an icon to your working directory.
|
1 |
app.setWindowIcon(QIcon('python.png')) |
This is for creating text, it is just a basic text with the color and font size.
|
1 2 3 4 5 6 7 8 9 10 |
Text { id:mytext text:"Geekscoders.com - PyQt5 QML Lesson" color:"white" font.pixelSize:35 font.bold:true anchors.centerIn:parent } |
Using this code you can add image in the window.
|
1 2 3 4 5 |
Image { id:image source:'python.png' } |
And this code is for adding TextInput
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
TextInput { id:textinput text:"Hello" color:"white" font.pixelSize:16; font.bold:true x:200 y:50 focus:true maximumLength:12 font.capitalization:Font.AllUppercase } |
Run the complete code and this is the result.
