集成C++和QML。 Qt 5.4

Question

我正在阅读过去几小时的Qt文档，试图找出一种方法来使用Qt Quick UI（QML）创建的UI与C++代码（函数等）进行通信（交互）。

我已经阅读了这里的5或6个类似的问题，但我有点困惑，我有问题找出从哪里开始或首先做什么。 如果有人能花时间列出完成这项工作所需的步骤，我会非常感激。

我到目前为止所做的工作。我试着做...>添加新项目> C++类，但我失败了，说错误：“未能添加一个或多个文件到项目”>它似乎创建了文件（..。cpp和.h）他们在其他项目文件所在的文件夹中，但未包含在项目中。 我想要做的只是简单的像通过C++函数或任何其他可能的方式更改文本文本的内容。

//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 
     } 
    } 

} 

感谢您在百忙之中阅读本和/或任何回复的时间。

Answer 1

使用Qt 5.4.0和Qt Creator 3.3.0，创建新项目：

1. 单击新建项目
2. Qt Quick的应用
3. 单击选择...
4. 名称项目和选择放置的位置
5. 单击下一步
6. 从下拉菜单中选择Qt Quick 2.4
7. 单击下一步
8. 选择所需的工具包（S）
9. 单击下一步
10. 单击Finish

---

现在你应该可以看到下面的代码开放main.qml文件：

import QtQuick 2.4 
import QtQuick.Window 2.2 

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

    } 
} 

---

将其更改为：

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 = ""; 
     } 
    } 

    //################ 
} 

---

加入C++类到您的项目：

1. 在项目查看器单击鼠标右键项目名称
2. 单击添加新...
3. 选择C++类，如果尚未选定
4. 点击选择...
5. 在类名申请进入 “CppClass”
6. 组基类的QObject
7. 单击下一步
8. 单击Finish

---

打开cppclass.h并将其更改为：

#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 

---

打开cppclass.cpp并将其更​​改为：

#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>"); 
} 

//################ 

---

打开main.cpp中，更改为：

#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(); 
} 

---

运行应用程序，键入一些文字输入字段然后点击发送。

---

---

针对动态Remo的评论这里的另一种方式拥有QML和C++沟通。这种方法基于C++发出一个信号，QML作用于它。以下是让它工作的代码。

---

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() 
    } 
}