In this PyQt5 QtQuick article i want to show you Writing Text in Window. So before this we have learned that How To Create Window In QtQuick. but before that let’s talk about QtQuick.
What is QtQuick in PyQt5?
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.
QtQuick module in PyQt5 includes classes and components for integrating QML with Python applications. Some key features and components of QtQuick in PyQt5 are:
- QQmlApplicationEngine: This class provides an environment for loading and running QML files inside PyQt5 application. It allows you to create Qt applications with QML-based user interfaces.
- QQmlComponent: This class represents a QML component that can be instantiated dynamically at runtime. It enables the creation of QML objects programmatically from Python code.
- QQmlContext: This class manages the context properties and object ownership for QML components. It allows Python objects to be exposed to QML and vice versa, and it enables communication between Python and QML components.
- QQuickView: This class provides a window for displaying QML content. It is similar to QWidget in PyQt, but specifically designed for embedding QML content within PyQt applications.
- QQuickItem: This class represents a visual item in a QML scene. It serves as the base class for all QML items and provides properties and methods for interacting with QML objects from Python.
- QML Elements: QtQuick module includes various QML elements (e.g., Rectangle, Text, Image, ListView) for creating user interfaces. These elements can be customized and styled using QML syntax.
OK now let’s write our code.
This is our main.qml file.
|
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 49 50 51 52 53 54 |
import QtQuick.Window 2.2 import QtQuick 2.3 Window { visible:true width:600 height:400 color:"yellow" title: "PyQt5 QML Window" Rectangle { id:blueRect color:"blue" width:450 height:64 //x:80 //y:80 anchors.centerIn:parent border.color:"black" border.width:6 radius:15 } Text { id:text1 text:"Hello QtQuick Application" font.pixelSize:30 font.bold:true color:"white" anchors.centerIn:parent } } |
And this is the main.py for loading our main.qml, i have described this file in my previous article.
|
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 |
from PyQt5.QtQml import QQmlApplicationEngine from PyQt5.QtWidgets import QApplication from PyQt5.QtGui import QIcon import sys def runQML(): # Create an instance of QApplication app = QApplication(sys.argv) # Create an instance of QQmlApplicationEngine engine = QQmlApplicationEngine() # Set the application icon app.setWindowIcon(QIcon("codeloop.png")) # Load the main QML file engine.load('main.qml') # Check if root QML objects were loaded successfully if not engine.rootObjects(): return -1 return app.exec_() # Run the application event loop if __name__ == "__main__": # Run the QML application and exit with the return value sys.exit(runQML()) |
So in the above code we have created our main Window element with width, height, name and color of the window. also you can see we have given a title for the window.
|
1 2 3 4 5 6 7 |
Window { visible:true width:600 height:400 color:"yellow" title: "PyQt5 QML Window" |
This is the rectangle that we want to draw in the window. basically we have given the width and height for the rectangle and also with border.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
Rectangle { id:blueRect color:"blue" width:450 height:64 //x:80 //y:80 anchors.centerIn:parent border.color:"black" border.width:6 radius:15 } |
And here is the main topic writing text using Text element in QtQuick. this is just a basic text. we have given the text, font size and also color for the text.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Text { id:text1 text:"Hello QtQuick Application" font.pixelSize:30 font.bold:true color:"white" anchors.centerIn:parent } |
So run the complete source code this will be the result.
Subscribe and Get Free Video Courses & Articles in your Email