All geek questions in one place

Integrate C ++ and QML. Qt 5.4

I read the Qt documentation in the last couple of hours, trying to figure out how to create a user interface created using Qt Quick UI (QML), communicate (interact) with C ++ code (functions ... etc.).

I read 5 or 6 similar questions here, but I'm a little confused, I have problems deciding where to start or what to do first. I would really appreciate it if someone could spend the time and list the steps necessary to complete this work.

What have i done so far. I tried to do ...> add a new element> C ++ class, but I could not say with an error: "could not add one or more files for the project"> It seems that the files (... cpp and .h) were created , they were in the folder where other project files were, but not included in the project. What I want to do is just something simple, like changing the textedit text using a C ++ function or in any other way.

//Test.qml(main.qml)

import QtQuick 2.1 import QtQuick.Window 2.0 Rectangle { id: rootRect width: Screen.width/2 height: Screen.height/2 color: "gray" Button{} Rectangle{ id: textField width: 120 height: 40 color: "white" x:274; y: 61 border.color: "blue" border.width: 4 radius: 2 } TextEdit { id: display x: 274 y: 61 width: 80 height: 20 text: qsTr("Text Edit") font.pixelSize: 22 color: "black" anchors.centerIn: textField } Rectangle{ id: inputField width: textField.width height: textField.height border.color: "green" border.width: 3 color: "white" x: 140; y: 61 } TextEdit{ id: input color: "red" font.pixelSize: 30 anchors.centerIn: inputField text: "Some Text" } }

//Button.cpl

 import QtQuick 2.0 import QtQuick.Window 2.0 Item { property string defaultText: "New Text" Rectangle{ id: button width: rootRect.width/6 height: rootRect.height/8 color: "black" x: 200; y: 200 radius: 10 } MouseArea{ id: buttonClickArea width: 0 anchors.rightMargin: 0 anchors.bottomMargin: 0 anchors.fill: button onClicked: { display.text = defaultText } } }

Thanks for taking the time to read this and / or any answers.

+6
source share
1 answer

Using Qt 5.4.0 and Qt Creator 3.3.0, create a new project:

  • Click "New Project"
  • Qt quick app
  • Click "Select ..."
  • Name the project and choose where to place it.
  • Click "Next"
  • Select Qt Quick 2.4 from the drop-down menu
  • Click "Next"
  • Select the desired kit (s)
  • Click "Next"
  • Click Finish

You should now see the open main.qml file with the following code:

 import QtQuick 2.4 import QtQuick.Window 2.2 Window { visible: true MainForm { anchors.fill: parent mouseArea.onClicked: { Qt.quit(); } } }

Change it to:

 import QtQuick 2.4 import QtQuick.Window 2.2 //### New Code ### import QtQuick.Controls 1.3 //################ Window { id: window1 visible: true //### New Code ### width: 400 height: 500 TextArea { id: textArea readOnly: true anchors.bottom: textInput.top anchors.bottomMargin: 6 anchors.right: parent.right anchors.rightMargin: 8 anchors.left: parent.left anchors.leftMargin: 7 anchors.top: parent.top anchors.topMargin: 7 } TextField { id: textInput y: 470 height: 23 anchors.right: sendButton.left anchors.rightMargin: 6 anchors.bottom: parent.bottom anchors.bottomMargin: 7 anchors.left: parent.left anchors.leftMargin: 7 } Button { id: sendButton x: 328 y: 470 width: 64 height: 23 text: qsTr("Send") anchors.bottom: parent.bottom anchors.bottomMargin: 7 anchors.right: parent.right anchors.rightMargin: 8 onClicked: { CppClass.sendMessage(textInput.text, textArea); textInput.text = ""; } } //################ }

Add the C ++ class to the project:

  • Right mouse Click project name in the project view
  • Click Add New ...
  • Select C ++ class if not already selected
  • Click "Select ..."
  • In the Class Name field, enter "CppClass"
  • Set base class in QObject
  • Click "Next"
  • Click Finish

Open cppclass.h and change it to:

 #ifndef CPPCLASS_H #define CPPCLASS_H #include <QObject> //### New Code ### #include <QQuickItem> #include <QQuickTextDocument> #include <QTextDocument> //################ class CppClass : public QObject { Q_OBJECT public: explicit CppClass(QObject *parent = 0); ~CppClass(); //### New Code ### Q_INVOKABLE void sendMessage(const QString &msg, QQuickItem *textArea); //################ signals: public slots: }; #endif // CPPCLASS_H

Open cppclass.cpp and change it to:

 #include "cppclass.h" CppClass::CppClass(QObject *parent) : QObject(parent) { } CppClass::~CppClass() { } //### New Code ### void CppClass::sendMessage(const QString &msg, QQuickItem *textArea) { QTextDocument *textDocument = textArea->property("textDocument").value<QQuickTextDocument*>()->textDocument(); textDocument->setHtml(textDocument->toHtml() + "\n<b>Text sent to Cpp side:</b> <i>" + msg + "</i>"); } //################

Open main.cpp and change it to:

 #include <QGuiApplication> #include <QQmlApplicationEngine> //### New Code ### #include <QQmlContext> #include "cppclass.h" //################ int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); QQmlApplicationEngine engine; //### New Code ### CppClass cppClass; engine.rootContext()->setContextProperty("CppClass", &cppClass); //################ engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); return app.exec(); }

Launch the application, enter text in the input field and click "Submit".

In response to Dynamic Remo's comment, another way of communicating QML and C ++. This approach is based on C ++ emitting a signal and acting on it with QML. Below is the code to make it work.

cppclass.h

 #ifndef CPPCLASS_H #define CPPCLASS_H #include <QObject> #include <QDateTime> class CppClass : public QObject { Q_OBJECT public: explicit CppClass(QObject *parent = 0); ~CppClass(); Q_INVOKABLE void getCurrentTime(); signals: void timeUpdate(QString currentTime); public slots: }; #endif // CPPCLASS_H

cppclass.cpp

 #include "cppclass.h" CppClass::CppClass(QObject *parent) : QObject(parent) { } CppClass::~CppClass() { } void CppClass::getCurrentTime() { emit timeUpdate(QDateTime::currentDateTime().toString("ddd dd MMMM yyyy hh:mm:ss.zzz")); }

main.cpp

 #include <QGuiApplication> #include <QQmlApplicationEngine> #include <QQmlContext> #include "cppclass.h" int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); CppClass cppClass; QQmlApplicationEngine engine; engine.rootContext()->setContextProperty("CppClass", &cppClass); engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); return app.exec(); }

main.qml:

 import QtQuick 2.4 import QtQuick.Window 2.2 import QtQuick.Controls 1.2 Window { id: rootWindow width: 400 height: 400 visible: true Connections { target: CppClass onTimeUpdate: { initailizeDllMsg.text = currentTime } } Text { id: initailizeDllMsg text: qsTr("{current time placeholder}") font.pointSize: 14 anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter } Button { id: button1 x: 163 y: 357 text: qsTr("Show current time") anchors.bottom: parent.bottom anchors.bottomMargin: 20 anchors.horizontalCenter: parent.horizontalCenter onClicked: CppClass.getCurrentTime() } }
+13
source

Source: https://habr.com/ru/post/979546/

More articles:


All Articles