首页 > 代码库 > QML中使用C++类的实现

QML中使用C++类的实现

      之前用Qt写过串口的小软件。STM32 IAP工具 和 用qt写的一个简单到不能在简单的上位机 。后来接触了QML,觉得传统的那种界面太那个了,写样式也麻烦。所以很早就想过用QML来为串口上位机做界面。无奈没搞懂QML到底是如何去调用C++的。百度了一堆文章,多半是翻译官方的例子。不知所云。直到最近在csdn上看到一篇文章 Qt Quick 之 QML 与 C++ 混合编程详解 ,终于有点懂了。不过,文章似乎有点长了。博客园上面也有见过,有朋友写过类似的文章。今天,总算实现了QML访问一个自定义类中的属性。故写下这篇文章。

      例子很简单,main.qml访问stringt类中的一个属性并显示其内容:m_String 

      注意:Qt版本 5.4.0 | Creater版本 3.3.0

     首先创建一个新的 Qt Quick Application-->选择controls 1.3。选择带controls的,生成的main.qml的根是ApplicationWindow 而另一种则是Window,其他的看起来没什么区别。具体要查文档咯

技术分享

项目中有个MainForm.ui.qml。把他删掉。然后修改main.qml文件。

 

1 ApplicationWindow {2     title: qsTr("Hello World")3     width: 6404     height: 4805     visible: true     //显示窗口6 7     8 }

然后创建一个stringt类继承QObject。如果想要让一个类可以被qml访问。这个类必须是继承QObject或其派生类。

技术分享

使用宏Q_PROPERTY可以让方法被moc感知。stringt类的代码如下

 1 #ifndef STRINGT_H 2 #define STRINGT_H 3  4 #include <QObject> 5  6 class stringt : public QObject 7 { 8     Q_OBJECT 9     Q_PROPERTY(QString Ttext READ Ttext WRITE setTtext)10 public:11     explicit stringt(QObject *parent = 0);12     ~stringt();13 14     QString Ttext(void) const;15     void setTtext(const QString str);16 signals:17 18 public slots:19 20 private:21     QString m_String;22 };23 24 #endif // STRINGT_H

上边是头文件,接下来是源文件

 1 #include "stringt.h" 2  3 stringt::stringt(QObject *parent) 4     : QObject(parent) 5     , m_String("Text just") 6 { 7  8 } 9 10 stringt::~stringt()11 {12 13 }14 15 QString stringt::Ttext() const16 {17     return m_String;18 }19 20 void stringt::setTtext(const QString str)21 {22     m_String = str;23 }

接着就是main文件里面,注册这个类就可以了,用qmlRegisterType这个函数

 1 #include <QApplication> 2 #include <QQmlApplicationEngine> 3 #include <QtQml> 4 #include "stringt.h" 5  6 int main(int argc, char *argv[]) 7 { 8     QApplication app(argc, argv); 9 10     qmlRegisterType<stringt>("m.stringT", 1, 0, "StringT");11                    //要导入的类  包名 主版本号 次版本号 元素名12     QQmlApplicationEngine engine;13     engine.load(QUrl(QStringLiteral("qrc:/main.qml")));14 15     return app.exec();16 }

最后就是QML文件了。这里定义了两个矩形。点击左边的矩形后,右边的矩形会改变颜色和文本。

 1 import QtQuick 2.4 2 import QtQuick.Controls 1.3 3 import QtQuick.Window 2.2 4 import QtQuick.Dialogs 1.2 5 import m.stringT 1.0    //导入类 6  7 ApplicationWindow { 8     title: qsTr("Hello World") 9     width: 64010     height: 48011     visible: true12 13     StringT{    //创建一个元素14         id: stringT15     }16 17     Rectangle {18         id: rect119         x: 12; y: 1220         width: 60; height: 6021         color: "lightsteelblue"22         MouseArea {23             id: rect1_area24             anchors.fill: parent25             onClicked:26             {27                 rect2.color = "lightgreen"28                 rect2_text.text = stringT.Ttext29             }30         }31     }32 33     Rectangle {34         id: rect235         x: rect1.x + rect1.width + 1036         y: rect1.y37         width: rect1.width; height: rect1.height38         border.color: "lightsteelblue"39         border.width: 340         radius: 341         Text {42             id: rect2_text43             text: qsTr("Hello")44             font.pixelSize: 1245             anchors.centerIn: parent46         }47     }48 }

效果大概是这样的。

技术分享

  技术分享

QML中使用C++类的实现