PyQt5 - Урок 007. Працює з QML QtQuick (Сигнали та слоти)

PyQt5, QML, QtQuick, Signal, Slot

А тепер глибше зануримося в роботу з Qt за допомогою PyQt5, скориставшись сучасними можливостями Qt. Під такими можливостями я маю на увазі QtQuick і QML. PyQt5 дозволяє використовувати класи Qt, які можуть обробляти код QML, а отже, можна написати інтерфейс на QML, а також передавати сигнали в QML шар і викликати слоти об'єктів , успадкованих від QObject з шару QML.

Щоб познайомитися з такими можливостями PyQt5, напишемо програму, яка реалізує такі завдання:

• Інтерфейс програми повинен бути написаний на QML
• Повинний бути реалізований клас, успадкований від QObject і написаний на python, з яким взаємодіятимемо з QML
• Додаток за допомогою даного класу повинен буде складати та віднімати цілі числа

Зовнішній вигляд програми повинен виглядати так:

Структура проекту

У проекті буде всього два файли:

• main .py - файл програми на python, там же буде клас для обчислень
• main.qml - файл інтерфейсу на QML

Сигнали в PyQt5

Сигнатура сигналу в загальному випадку виглядатиме так:

PyQt5.QtCore.pyqtSignal

Створіть один або кілька перевантажених незв'язаних сигналів як атрибут класу.

| Параметри: | * types – Типи, що визначають сигнатуру C++ сигналу. Кожен тип може бути об'єктом типу Python або рядком, який є іменем типу C++. Альтернативно кожен може бути послідовністю аргументів типу. І тут кожна послідовність визначає сигнатуру перевантаження іншого сигналу. Перше навантаження буде використовуватися за замовчуванням.
name – Назва сигналу. Якщо його опущено, використовується ім'я атрибута класу. Це може бути поставлене лише як аргумент ключового слова.
revision – ревізія сигналу, який експортується до QML. Це може бути поставлене лише як аргумент ключового слова.
* arguments – Послідовність імен аргументів сигналу, які експортуються до QML. Це може бути поставлене лише як аргумент ключового слова.
|

Слоти в PyQt5

Для оголошення слотів PyQt5 використовується спеціальний декоратор.

PyQt5.QtCore.pyqtSlot

| Параметри: | * types – Типи, що визначають сигнатуру слота C++. Кожен тип може бути об'єктом типу Python або рядком, який є ім'ям типу C++.
name – Ім'я слота, який відображатиметься на C++. Якщо опущено, буде використано ім'я Python, що прикрашається. Це може бути поставлене лише як аргумент ключового слова.
revision – ревізія слота, який експортується до QML. Це може бути поставлене лише як аргумент ключового слова.
* result – Тип результату і може бути об'єктом типу Python або рядком, що визначає тип C++. Це може бути поставлене лише як аргумент ключового слова.
|

main .py

from PyQt5.QtGui import QGuiApplication
from PyQt5.QtQml import QQmlApplicationEngine
from PyQt5.QtCore import QObject, pyqtSignal, pyqtSlot


class Calculator(QObject):
    def __init__(self):
        QObject.__init__(self)

    # cигнал передающий сумму
    # обязательно даём название аргументу через arguments=['sum']
    # иначе нельзя будет его забрать в QML
    sumResult = pyqtSignal(int, arguments=['sum'])

    subResult = pyqtSignal(int, arguments=['sub'])

    # слот для суммирования двух чисел
    @pyqtSlot(int, int)
    def sum(self, arg1, arg2):
        # складываем два аргумента и испускаем сигнал
        self.sumResult.emit(arg1 + arg2)

    # слот для вычитания двух чисел
    @pyqtSlot(int, int)
    def sub(self, arg1, arg2):
        # вычитаем аргументы и испускаем сигнал
        self.subResult.emit(arg1 - arg2)


if __name__ == "__main__":
    import sys

    # создаём экземпляр приложения
    app = QGuiApplication(sys.argv)
    # создаём QML движок
    engine = QQmlApplicationEngine()
    # создаём объект калькулятора
    calculator = Calculator()
    # и регистрируем его в контексте QML
    engine.rootContext().setContextProperty("calculator", calculator)
    # загружаем файл qml в движок
    engine.load("main.qml")

    engine.quit.connect(app.quit)
    sys.exit(app.exec_())

main.qml

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2

ApplicationWindow {
    visible: true
    width: 640
    height: 240
    title: qsTr("PyQt5 love QML")
    color: "whitesmoke"

    GridLayout {
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.margins: 9

        columns: 4
        rows: 4
        rowSpacing: 10
        columnSpacing: 10

        Text {
            text: qsTr("First number")
        }

        // Поле ввода первого числа
        TextField {
            id: firstNumber
        }

        Text {
            text: qsTr("Second number")
        }

        // Поле ввода второго числа
        TextField {
            id: secondNumber
        }

        Button {
            height: 40
            Layout.fillWidth: true
            text: qsTr("Sum numbers")

            Layout.columnSpan: 2

            onClicked: {
                // Вызываем слот калькулятора, чтобы сложить числа
                calculator.sum(firstNumber.text, secondNumber.text)
            }
        }

        Text {
            text: qsTr("Result")
        }

        // Здесь увидим результат сложения
        Text {
            id: sumResult
        }

        Button {
            height: 40
            Layout.fillWidth: true
            text: qsTr("Subtraction numbers")

            Layout.columnSpan: 2

            onClicked: {
                // Вызываем слот калькулятора, чтобы вычесть числа
                calculator.sub(firstNumber.text, secondNumber.text)
            }
        }

        Text {
            text: qsTr("Result")
        }

        // Здесь увидим результат вычитания
        Text {
            id: subResult
        }
    }

    // Здесь забираем результат сложения или вычитания чисел
    Connections {
        target: calculator

        // Обработчик сигнала сложения
        onSumResult: {
            // sum было задано через arguments=['sum']
            sumResult.text = sum
        }

        // Обработчик сигнала вычитания
        onSubResult: {
            // sub было задано через arguments=['sub']
            subResult.text = sub
        }
    }
}