А вот мы и добрались до передачи данных между слоем QML и слоем C++. Честно говоря, принцип настолько же простой, как и просто использование сигналов и слотов в одном слое C++. Особенно в Qt 5.5.
Пример будет показан на основе программного кода из предыдущего урока , где мы создали диалоговое окно. Но скриншотов примера работы на Android не будет показано, но заверяю Вас - Всё работает как швейцарские часы.
Структура проекта с QML
- структура проекта с qml
По сравнению с предыдущим уроком, у нас появились некоторые изменения. А именно, добавился новый класс, который будет являться ядром приложения.
- appcore.h - заголовочный файл ядра приложения;
- appcore.cpp - файл исходных кодов ядра приложения.
А продолжать работать мы также будем с QQMLApplicationEngine. Нужно будет просто взять от движка QML контекст и загрузить в него объект нового класса, от которого будут поступать сигналы и в который будут передаваться данные.
appcore.h
Заголовочный файл нашего класса прост, как три копейки. В нём есть один один счётчик (переменная типа int ), слот, который будет увеличивать счётчик на один и запускать сигнал, который также один в классе и который будет передавать значение счетчика в QML-интерфейс.
#ifndef APPCORE_H
#define APPCORE_H
#include <QObject>
class AppCore : public QObject
{
Q_OBJECT
public:
explicit AppCore(QObject *parent = 0);
signals:
// Сигнал для передачи данных в qml-интерфейс
void sendToQml(int count);
public slots:
// Слот для приёма данных из qml-интерфейса
void receiveFromQml();
private:
int count; // Счетчик, которым будем оперировать
};
#endif // APPCORE_Happcore.cpp
Ну и логика класса в его исходном коде.
#include "appcore.h"
AppCore::AppCore(QObject *parent) : QObject(parent)
{
count = 0;
}
void AppCore::receiveFromQml()
{
count++;
emit sendToQml(count);
}main.cpp
А вот здесь уже будем подключать к нашему классу интерфейс, написанный на QML.
#include <QApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "appcore.h"
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QQmlApplicationEngine engine; // Создаём движок qml
AppCore appCore; // Создаём ядро приложения
QQmlContext *context = engine.rootContext(); // Создаём корневой контекст
/* Загружаем объект в контекст для установки соединения,
* а также определяем имя, по которому будет происходить соединение
* */
context->setContextProperty("appCore", &appCore);
// И загружаем в него исходники qml
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
return app.exec();
}
main.qml
Приведу часть кода, чтобы не отвлекать Вас от главного. А именно, соединение в QML слое осуществляется с помощью объекта Connections , в качестве target которого указывается Ваш класс установленный в контекст. Обращение осуществляется по текстовому наименованию, которое загружается в контекст движка QML вместе с самим объектом.
Чтобы получать сигналы от слоя C++ необходимо в Connections прописать функцию, которая будет именоваться практически так же, как и сигнал целевого объекта, но начинаться будет с on и далее имя сигнала с заглавной буквы. То есть логика следующая
- signalToQml - на C++
- onSignalToQml - на QML
А вот вызов Слота будет происходить несколько иначе. Например, у нас имеется объект класса в C++ , к которому мы обращаемся по имени appCore (объявлен целью в Connections ). А далее вызываем функцию слот. То есть следующим образом: appCore.slotSomething(count).
Вызов слота в данном коде осуществляется по нажатию кнопки OK в диалоге, а по Cancel вызова не происходит. При этом, объект appCore в C++ коде увеличивает счётчик на один и вызывает сигнал, чтобы поместить значение счётчика в текстовый лейбл приложения.
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Dialogs 1.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World") // Ну как же без Приветствия Миру
color: "white"
/* С помощью объекта Connections
* Устанавливаем соединение с классом ядра приложения
* */
Connections {
target: appCore // Указываем целевое соединение
/* Объявляем и реализуем функцию, как параметр
* объекта и с имененем похожим на название сигнала
* Разница в том, что добавляем в начале on и далее пишем
* с заглавной буквы
* */
onSendToQml: {
labelCount.text = count // Устанавливаем счётчик в текстовый лейбл
}
}
MainForm {
// Растягиваем объект главного окна по всему родительскому элементу
anchors.fill: parent
// Создадим текстовый лейбл
Text {
id: labelCount
// А также установим его визуальные параметры
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
height: 300
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
// Первым текстом будет традиционный Хеллоу Ворлд!
text: "Hello, World !!!"
}
// Стилизуем первую кнопку
button1.style: ButtonStyle {
// Программный код из предыдущего урока
}
// Стилизуем вторую кнопку
button2.style: ButtonStyle {
// Программный код из предыдущего урока
}
// Запускаем диалог по нажатию любой из кнопок в главном окне
button1.onClicked: dialogAndroid.open();
button2.onClicked: dialogAndroid.open();
// Создаём объект диалогового окна
Dialog {
id: dialogAndroid
/* Когда деплоите под Android-устройства,
* обязательно закоментируйте эти две строки,
* иначе словите глюки в работе устройства
*/
width: 600 // Задаём ширину диалога, работает на десктопе, но на Android не сработает
height: 500 // Задаём высоту диалога, работает на декстопе, но на Android не сработает
// Создаём содержимое диалогового окна
contentItem: Rectangle {
width: 600 // Устанавливаем ширину, необходимо для Android-устройства
height: 500 // Устанавливаем высоту, необходимо для Android-устройства
color: "#f7f7f7" // Задаём цвет
// Область для сообщения диалогового окна
Rectangle {
// Программный код из предыдущего урока
}
// Создаём горизонтальный разделитель с помощью Rectangle
Rectangle {
id: dividerHorizontal
// Программный код из предыдущего урока
}
/* Создаём подложку для кнопок в виде объекта Строки
* В данном объекте для объектов детей не работают некоторые параметры
* anchors, кроме параметров anchors.top и anchors.bottom
*/
Row {
id: row
// Программный код из предыдущего урока
Button {
id: dialogButtonCancel
// Программный код из предыдущего урока
// По нажатию кнопки закрываем диалог
onClicked: dialogAndroid.close()
}
// Создаём разделитель между кнопками шириной в 2 пикселя
Rectangle {
id: dividerVertical
// Программный код из предыдущего урока
}
Button {
id: dialogButtonOk
// Программный код из предыдущего урока
// По нажатию кнопки закрываем диалог
onClicked: {
/* Прежде, чем закрывать диалог по OK кнопке,
* отправим данные в слот ядра приложения
* */
appCore.receiveFromQml()
// А потом и закроем диалог
dialogAndroid.close()
}
}
}
}
}
}
}Итог
В результате получаем простое взаимодействие между C++ и QML на основе всё тех же сигналов и слотов. Ну а результат работы приложения Вы можете увидеть в видеоуроке.
