А вот мы и добрались до передачи данных между слоем 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_H
appcore.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 на основе всё тех же сигналов и слотов. Ну а результат работы приложения Вы можете увидеть в видеоуроке.
Не понял, как будет передаваться значение count в QML, если нигде он не описан через
Q_PROPERTY
Так и будет передаваться. Это аргумент сигнала.
А описывать в Q_PROPERTY его не нужно. Не обязательно всё описывать через Q_PROPERTY . Зачастую достаточно объявлять метод сигналом, слотом или Q_INVOKABLE.
Статья интересная, как и реализация, но в упор ругается на
А почему у вас название класса и имя переменной одинаковые?
Проект ваш смотреть нужно, что ещё не доделали, либо просто пересобрать билд для начала, возможно, что при создании файлов класса не обновилась информация для qmake. То есть как минимум перезапустить qmake требуется.
Огромное спасибо за статью.
Спасибо за отзыв!
Здраствуйте сново обращаюсь к вам. Ваш клас appcore.h и исходник appcore.cpp
main.cpp
вот main.qml
Вот этот момент
frame Y:
не получается перенести значения из С++
Добрый день
И что вы хотели сделать в этом коде?
и это
Думал что через:
frameY: Number (count)
буду контролировать чередование анимаций, картинка 600 на 600 с кадром 100. если сразу указать: frameCount: 36 то вся анимация пролистается, а мне необходимо конкретная строка анимации ( ну например пролистать 6 кадров с Y= 200, а потом с Y= 400)
пока на сайтах искал наткнулся на Namber, но не получилось.
Ну ок, такой тип в документации есть, но откуда-то это взяли?
я и намёка не вижу на сам вот этот Count.
Впрочем, после пояснения уже немного яснее стало, думаю, что можете так попробовать сделать
Нет. Не читает. Попробывал сразу задать значение в appcore
не работает, хотя без ошибок.
Чтобы работало, нужно сигнал высылать, то есть
Спасибо огромное! Заработало!