Qt Quick (Qt User Interface Creation Kit)

The key new feature of the Qt 4.7 [doc.qt.nokia.com] and Qt Creator [developer.qt.nokia.com] 2.1 releases is Qt Quick [doc.qt.nokia.com]: a high-level UI technology that allows developers and UI designers to work together to create animated, touch-enabled UIs and lightweight applications. It includes:

1. New Tools in the Qt Creator IDE: including a visual editor that allows UI designers and developers to cooperate, working on the same code in an iterative approach
2. QML (Qt Meta-Object Language): an easy to use, declarative language
3. QtDeclarative: a new module in the Qt library that enables a new declarative programming approach

And while no C++ programming skills are needed to use Qt Quick, it is 100% based on Qt and can be extended from C++ (and other languages, thanks to the bindings), limited only by your creativity.

Scope (Qt Creator 2.1 and Quick)

• QML project wizard and project management (new file format for pure QML applications)
• Advanced QML editor with syntax highlighting, code completion, integrated help features and more
• Qt Quick Designer: Visual WYSIWYG editor to create Qt Quick user interfaces (technical preview)
• Qt Quick Components: Common UI Elements that fit into platform Look & Feel

QML vs. Widget-based GUI

Qt beginners often ask: What option will be the best for creating my user interface. With Qt there are 3 techniques (wich can be integrated):

• using Qt Designer to create *.ui files, a XML-based UI description
• coding the setup of your UI in C++ with Qt widgets classes
• write or visually design (or modeling with Qt Creator 2.1) QML files

The HowTo is still to be done but use the tag qml vs widget [developer.qt.nokia.com] when searching and finding, thx :)

Links

• Getting Started [doc.qt.nokia.com]
• Creating a Qt Quick Application [doc.qt.nokia.com]
• Creating QML Components [doc.qt.nokia.com]
• Open Qt Quick Components [developer.qt.nokia.com]
• Qt Quick sync meeting minutes [developer.qt.nokia.com]
• Exporting QML from photoshop and GIMP – WIP
• QML UI examples on Forum Nokia [projects.forum.nokia.com]
• Qt Quick Tutorial [developer.qt.nokia.com]

Categories:

• Developing with Qt
  • Qt Quick

原创:

浅议Qt的事件处理机制 一

转帖：

Qt在线文档

http://doc.qt.nokia.com/4.7/

Qt e-Learning

http://qt.nokia.com/developer/learning/elearning

http://wikis.in.nokia.com/QtSoftware/LearnQt

http://www.ics.com/learning/icsnetwork/

官方Qt移动开发社区、资源、Wiki

Getting started with Git and GitHub

Nokia Forum projects

http://forum.nokia.com

http://forum.nokia.com.cn/ 

http://wiki.forum.nokia.com/index.php/Qt_%E5%BC%80%E5%8F%91

官方Qt论坛

http://developer.qt.nokia.com/forums

Qt for Symbian 开发资源

http://discussion.forum.nokia.com/forum/showthread.php?162323-Qt-for-Symbian-development-resources

中文Qt网站

http://qt.csdn.net

诺基亚论坛上的Qt for Symbian中文论坛

http://www.qtcn.org

www.qteverywhere.com

中文文档

http://forum.nokia.com.cn/document_1.html

http://qtdocs.sourceforge.net/index.php/%E5%88%86%E7%B1%BB:Qt_%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C

其他

如果在开发中遇到了技术细节上的问题，相信再下面两个论坛搜索相关关键字会比直接在baidu/google上搜强很多

http://lists.trolltech.com/qt-interest/

Qt在SlideShare的幻灯片

http://www.slideshare.net/tag/qt

非官方的优秀Qt论坛

http://www.qtcentre.org/forum/

请尊重原创作品和译文。转载请保持文章完整性，并以超链接形式注明原始作者地址http://blog.csdn.net/changsheng230，方便其他朋友提问和指正。

刚开始接触Qt的朋友可能对Qt在使用当中需要声明的各色各样的宏感到神秘而又陌生，本文将介绍Qt中经常使用的几个宏： Q_OBJECT, SIGNAL与SLOT, Q_SIGNALS 与 Q_SLOTS, Q_EMIT ,Q_INVOKABLE, Q_PROPERTY：

宏的头文件出处： $QTDIR/src/corelib/kernel/qobjectdefs.h

Q_OBJECT

#define Q_OBJECT / 
public: / 
    Q_OBJECT_CHECK / 
    static const QMetaObject staticMetaObject; / 
    Q_OBJECT_GETSTATICMETAOBJECT / 
    virtual const QMetaObject *metaObject() const; / 
    virtual void *qt_metacast(const char *); / 
    QT_TR_FUNCTIONS / 
    virtual int qt_metacall(QMetaObject::Call, int, void **); /

宏Q_OBJECT是Qt所有宏中最为重要的一个，Q_OBJECT是使用信号槽机制以及其他所有元对象系统提供的服务（内省、invokeMethod，元对象property系统等等）的前提条件。有关Q_OBJECT的讨论请参考Qt源码分析之QObject。 

SIGNAL与SLOT

这两个宏是调用connect方法时用到:

那么宏SIGNAL和SLOT为我们做了那些事情呢，看一下源代码：

原来它会基于把我们定义的信号、槽的名称返回一个字符串，比如SIGNAL(clicked()) 返回字符串 “2clicked()”, SLOT(showText())返回字符串“1showText()”

Q_SIGNALS 与 Q_SLOTS是Qt 4.1引入的，它们用来替换关键字signals和slots，原因是更好的与第三方信号槽机制兼容，比如boost库。尽管Q_SIGNALS 与 Q_SLOTS看起来没有做什么。其实不然，QT的元对象编译器moc会识别声明在头文件中的宏Q_SIGNALS，Q_SLOTS。并做为依据，生成元对象模型数据，详见文中最后所示代码实例

Q_EMIT

#define Q_EMIT #define emit

Q_EMIT用来替换关键字emit,原因也是更好的与第三方信号槽机制兼容，比如boost库。

这里要注意，我们看到Q_EMIT看起来同样的简单， 但它们是有区别的！表面的区别在于Q_SIGNALS 与 Q_SLOTS用在头文件中，而Q_EMIT用在代码视线中。 本质的区别的在于，Q_SIGNALS 与 Q_SLOTS将被moc识别，是必须使用的。而Q_EMIT或者emit是可有可无的。它不会被moc识别，它存在的唯一理由是：增加代码的可读性。  也就是说如下代码都能正常工作，但2）的写法也许会惹怒你的同事。

Q_INVOKABLE

#define Q_INVOKABLE

使用Q_INVOKABLE来修饰成员函数，目的在于被修饰的成员函数能够被元对象系统所唤起。这一机制在Qt C++/QML混合编程，Qt service framework, 以及Qt/ HTML5混合编程里广泛使用。我会随后另撰写一文做深入探讨。

Q_PROPERTY

#define Q_PROPERTY(text)   

使用Q_PROPERTY用以声明属性，属性类似于成员变量，但它能够被元对象系统所访问。QML的属性便是利用该机制得以实现的。 Q_PROPERTY的用法如下：

Q_PROPERTY(QString title READ title WRITE setTitle USER true)

接下来，让我们结合代码来看一下上述宏的使用以及元对象编译器是如何利用这些宏的。

以下代码由元对象编译器moc根据上述头文件自动生成：

从上面代码实例我们可以看到， QT的元对象编译器moc会识别声明在头文件中的宏Q_SIGNALS，Q_SLOTS, Q_PROPERTY, Q_PROPERTY。并以此做为依据，生成了元对象数据表。在这张元对象数据表中，我们已可以看到，moc根据头文件所声明的宏定义，识别出:

• 两个信号：colorChanged(), ready();      (Q_SIGNALS）
• 两个槽:    try1(), try2()                          (Q_SLOTS)
• 五个方法，其中被标记为Q_INVOKABLE的方法randomColor()被记录在元对象字符串数组qt_meta_stringdata_EllipseItem中。  
• 一个属性：color   (Q_PROPERTY)

请尊重原创作品和译文。转载请保持文章完整性，并以超链接形式注明原始作者地址http://blog.csdn.net/changsheng230，方便其他朋友提问和指正。

将QML整合到基于QWidget UI程序的方法有很多种，而具体采用哪种方法取决于现有UI代码的特性。

与基于QWidget的UI整合

如果你已经有了一个基于QWidget的UI，QML widgets可以使用QDeclarativeView来进行集成。QDeclarativeView是QWidget的一个子类，所以你可以像加载其他QWidget一样把它加载进你的UI。 具体方法是使用QDeclarativeView::setSource()方法加载一个QML文件到视图中，然后将这个视图（即QDeclarativeView）加到你的UI中。

view plain
QDeclarativeView *qmlView = new QDeclarativeView;  
qmlView->setSource(QUrl::fromLocalFile("myqml.qml"));  
  
QWidget *widget = myExistingWidget();  
QVBoxLayout *layout = new QVBoxLayout(widget);  
widget->addWidget(qmlView);  

这种方法的缺点在于与QWidget相比，QDelarativeVeiw的初始化过程更慢，而且使用更多的内存。如果创建大量的QDelarativeVeiw对象可能会导致性能的下降。在这种情况下，更好的选择是用QML重写你的widgets，使用main QML widget来加载widget, 从而替代QDelarativeVeiw的滥用。

请注意，QWidgets的UI设计理念与QML并不相同，所以将基于QWidget的应用移植到QML并不总是一个好主意。如果你的UI是由少数几个复杂、静态的元素的组成，使用QWidgets是一个更好的选择。而如果你的UI是由大量简单、动态的元素组成，那么QML则是你的最佳选择。

与基于QGraphicsView的UI整合

将QML widgets加入到QGraphicsScene

如果你已经有了一个基于Graphics View Framework的UI，你可以直接将QML widgets集成到你的QGraphicsScene中。具体方法是使用QDeclarativeComponent 从QML文件中创建一个QGraphicsObject，并通过使用QGraphicsScene::addItem(), 方法把这个图形对象加到你的scene中，或者将其父化到已经存在与QGraphicsScene的组件中。举例说明:

>

view plain
QGraphicsScene* scene = myExistingGraphicsScene();  
QDeclarativeEngine *engine = new QDeclarativeEngine;  
QDeclarativeComponent component(engine, QUrl::fromLocalFile("myqml.qml"));  
QGraphicsObject *object =  
    qobject_cast(component.create());  
scene->addItem(object);  

推荐使用下面的一些QGraphicsView选项来优化QML UIs的性能：

• QGraphicsView::setOptimizationFlags(QGraphicsView::DontSavePainterState)
• QGraphicsView::setViewportUpdateMode(QGraphicsView::BoundingRectViewportUpdate)
• QGraphicsScene::setItemIndexMethod(QGraphicsScene::NoIndex)

在QML中加载QGraphicsWidget 对象

另一个可供选择的方法是将你现有的QGraphicsWidget 对象暴露给QML，并且在QML中构建你的scene。请参见图形布局示例，它展示了如何结合QGraphicsWidget 、QGraphicsLinearLayout 以及QGraphicsGridLayout的使用，将Qt图形布局类暴露给QML。

为了将现有的QGraphicsWidget类暴露给QML，需使用qmlRegisterType()。在QML中使用C++型别的进一步信息，请参见在C++中拓展QML。 （译者注：也看参阅QML与C++混合编程使用)

英文原文出处：integrating QML with existing Qt UI code

本文适合于对Qt Quick有基本了解的读者。首先回答一个比较常会被问到的问题：什么是QML，它与Quick的关系是什么？

Qt Quick是Qt User Interface Creation Kit的缩写，而QML是Qt Quick最重要的组成部分，Qt Quick结合了如下技术：

组件集合，其中大部分是关于图形界面的

基于JavaScript陈述性语言：QML （Qt Meta-Object Language的缩写）

用于管理组件并与组件交互的C++ API - QtDeclarative模块

言归正传：通过Qt Creator，我们可以轻松生成一个Qt Quick的应用工程，从而为QML生成应用程序框架。具体操作详见：创建qt quick (qml) 应用程序。

C++与QML的交互是通过注册C++对象给QML环境得以实现的：

在C++实现中，非可视化的型别均为QObject的子类，可视化的类型均为QDeclarativeItem的子类。注意：QDeclarativeItem等同于QML的Item类。

如果用户想要定义自己的型别，做法如下：

在C++中，实现派生于QObject或QDeclarativeItem的子类，它是新定义item的实体对象；

在C++中，将1中实现的新item类型注册给QML；

在QML中，导入含有1中定义的新item的模块；

在QML中，向使用标准的item一样使用新定义的item

现举例说明，我们现尝试使用用Qt C++实现的MyButton对象（如下qml代码），它有自己的属性、方法以及信号的handler。用法如下（它与使用其它标准的QML item一样），所需要做的是 需要导入包含MyButton的对应模块名称及其版本“MyItems 1.0 ”。

//main.qml     
import Qt 4.7     
import MyItems 1.0     
Item {     
    width: 300; height: 200     
    MyButton {     
        //注意：x, y, width, height是继承自item的属性，无需再自定义的item中实现     
        x: 50; y: 50     
        width: 200; height: 100     
        color: "gray"   //自定义属性     
        onMySignals:  dosth  //自定义信号mySignals     
MouseArea {     
anchors.fill: parent     
onClicked: parent.myColor()   // 调用C++定义的方法myColor     
}     
    }     
}    
//main.qml  
import Qt 4.7  
import MyItems 1.0  
Item {  
    width: 300; height: 200  
    MyButton {  
        //注意：x, y, width, height是继承自item的属性，无需再自定义的item中实现  
        x: 50; y: 50  
        width: 200; height: 100  
        color: "gray"   //自定义属性  
        onMySignals:  dosth  //自定义信号mySignals  
MouseArea {  
anchors.fill: parent  
onClicked: parent.myColor()   // 调用C++定义的方法myColor  
}  
    }  
}  

为了能够上述qml代码工作，需要为在Qt C++代码中注册MyButton及其所属的模块，对应的main.cpp代码如下：

#include <QtGui/QApplication>     
#include "qmlapplicationviewer.h"     
int main(int argc, char *argv[])     
{     
    QApplication app(argc, argv);     
    QmlApplicationViewer viewer;     
    // MyButtonItem是与QML中MyButton相对应的C++实现的类名称     
    // 1，0是版本信息；MyItems是MyButton所属的模块名称     
    qmlRegisterType<MyButtonItem>("MyItems", 1, 0, "MyButton ");     
    viewer.setOrientation(QmlApplicationViewer::Auto);     
    viewer.setMainQmlFile(QLatin1String("qml/untitled/main.qml"));     
    viewer.show();     
    return app.exec();     
}    
#include <QtGui/QApplication> 
#include "qmlapplicationviewer.h"  
int main(int argc, char *argv[])  
{  
    QApplication app(argc, argv);  
    QmlApplicationViewer viewer;  
    // MyButtonItem是与QML中MyButton相对应的C++实现的类名称  
    // 1，0是版本信息；MyItems是MyButton所属的模块名称  
    qmlRegisterType<MyButtonItem>("MyItems", 1, 0, "MyButton ");  
    viewer.setOrientation(QmlApplicationViewer::Auto);  
    viewer.setMainQmlFile(QLatin1String("qml/untitled/main.qml"));  
    viewer.show();  
    return app.exec();  
}  

上面我们在QML中MyButton对象，有自己的属性、方法以及信号的handler，其实现均来自Qt C++。Qt C++需要作以下工作：首先要定义 QML中MyButton相对应的C++实现MyButtonItem，它必须继承自QDeclarativeItem

为了让MyButton对象能够使用其Color属性，MyButtonItem类需要利用QT的PROPERTY系统，为Moc声明其属性

为了让MyButton对象能够使用其myColor方法，MyButtonItem类需要声明该方法，并标记为Q_INVOKABLE （另外一种解决方案是将myColor声明为槽。

为了让MyButton对象能够接受到C++所emit的信号，并在onMySignals，MyButtonItem类需要声明mySignals信号

class MyButtonItem : public QDeclarativeItem     
{     
    Q_OBJECT     
    Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)     
signals:     
    void colorChanged();     
    void mySignals();     
public:     
    MyButtonItem(QDeclarativeItem *parent = 0);     
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option,     
               QWidget *widget = 0);     
public:     
    const QColor &color() const;     
    void setColor(const QColor &newColor);     
    Q_INVOKABLE QColor myColor() const;     
// Alternatives for myColor to be called from QML     
//public slots     
    //QColor myColor() const;     
private:     
    QColor m_color;     
}; 

原始作者地址http://blog.csdn.net/changsheng230

小结：关于详解QML与C++混合编程使用的内容介绍完了，希望本文对你有所帮助！

1.这里主要是介绍，如何在c++中调用QML中的函数和设置QML中的属性的问题

2.具体代码

// UICtest.qml
import Qt 4.7
Rectangle {
    id: mainWidget;
    width: 640
    height: 480
    function callbyc(v)
    {
        mainWidget.color = v;
        return "finish";
    }
    Rectangle{
        id: secondRect;
        x: 100;
        y: 20;
        width: 400;
        height: 300;
        Rectangle{
            x: 10;
            y: 20;
            width: 30;
            height: 40;
            color: "#FF035721"
            Text  {
                objectName: "NeedFindObj";
                anchors.fill: parent;
                text: "";
            }
        }
    }
}

// main.cpp
#include <QtGui/QApplication>
#include <QtDeclarative/QDeclarativeView>
#include <QtDeclarative/QDeclarativeEngine>
#include <QtDeclarative/QDeclarativeComponent>
#include <QtDeclarative/QDeclarativeContext>
#include <QtDeclarative/QDeclarativeItem>
#include <QMetaObject>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QDeclarativeView qmlView;
    qmlView.setSource(QUrl::fromLocalFile("../UICtest/UICtest.qml"));
    qmlView.show();
    // 获取根节点，就是 QML中 id是mainWidget的节点
    QDeclarativeItem *item = qobject_cast<QDeclarativeItem*>(qmlView.rootObject());
    item->setProperty("color", QVariant("blue"));
    // 查找到我们需要的节点根均objectname NeedFindObj 来获得，并设置他的文本属性
    QDeclarativeItem *item1 = item->findChild<QDeclarativeItem *>("NeedFindObj");
    if (item1)
    {
        item1->setProperty("text", QVariant("OK"));
    }
    // 调用QML中的函数, 分别是 函数所在的对象， 函数名，返回值， 参数
    QVariant returnVar;
    QVariant arg1 = "blue";
    QMetaObject::invokeMethod(item, "callbyc",
                              Q_RETURN_ARG(QVariant, returnVar),Q_ARG(QVariant, arg1));
    qDebug(" %s",returnVar.toString().toLocal8Bit().data());
    return a.exec();
}

说明：

这里的根节点是id为mainWidget的矩形元素，那么在C++中获取根节点后就可以，直接的设置他的属性了。其他属性也可以同样,调用指定节点内的函数是通过QMetaObject中的invokeMethod 来进行调用的。

最后所有关于QML和c++交互部分就基本写完，如果想要更多的东西，或者一些其他方法，强烈看看

http://doc.qt.nokia.com/4.7-snapshot/qtbinding.html，或者帮助文档，（究竟是不是我的文档里面没有还是怎么的）

1.假设这样一种情况

我这里由一个Wideget 继承自QWidget上面添加来一个QLabel, 一个QPushButton

我如何把这个Wideget放到QML中使用，那么我当QPushButton 按下后我怎么在QML中进行处理呢？

我这里指出一种方法

让Wideget 继承QGraphicsProxyWidget，对Wideget进行导出，在QML中创建

此对象，在他导出的信中进行处理,具体代码。

还有就是这个网址上说明来很多QML与c++之间通讯的方法，很悲剧的是我的assistant中却没有者部分，不知道版本低还是怎么的。

http://doc.qt.nokia.com/4.7-snapshot/qtbinding.html

2.具体代码

//widget.h
#ifndef WIDGET_H
#define WIDGET_H
#include <QWidget>
#include <QGraphicsProxyWidget>
#include <QPushButton>
#include <QLabel>
#include <QLineEdit>
class Widget : public QGraphicsProxyWidget
{
    Q_OBJECT
public:
    explicit Widget(QGraphicsItem *parent = 0);
    ~Widget();
    Q_INVOKABLE void changeText(const QString& s);
signals:
    void sendOnButton(void);
private:
    QPushButton *m_Btn;
    QLabel      *m_Label;
    QWidget     *m_MainWidget;
};
#endif // WIDGET_H

//widget.cpp
#include "widget.h"
Widget::Widget(QGraphicsItem *parent) :
    QGraphicsProxyWidget(parent)
{
    m_MainWidget = new QWidget;
    m_Btn = new QPushButton(m_MainWidget);
    m_Label = new QLabel(m_MainWidget);
    m_Btn->setText("PushButton");
    m_Btn->setGeometry(10, 10, 100, 30);
    m_Label->setGeometry(10, 40, 200, 30);
    QObject::connect(m_Btn, SIGNAL(clicked()), this, SIGNAL(sendOnButton()));
    setWidget(m_MainWidget);
}
Widget::~Widget()
{
    delete m_MainWidget;
}
void Widget::changeText(const QString& s)
{
    m_Label->setText(s);
    qDebug(" call Widget::changeText");
}

// main.cpp
#include <QtGui/QApplication>
#include <QtDeclarative/QDeclarativeView>
#include <QtDeclarative/QDeclarativeEngine>
#include <QtDeclarative/QDeclarativeComponent>
#include <QtDeclarative/QDeclarativeContext>
#include "widget.h"
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    qmlRegisterType<Widget>("UIWidget", 1, 0, "Widget");
    QDeclarativeView qmlView;
    qmlView.setSource(QUrl::fromLocalFile("../UICtest/UICtest.qml"));
    qmlView.show();
    return a.exec();
}

// UICtest.qml
import Qt 4.7
import UIWidget 1.0
Rectangle {
    width: 640
    height: 480
    color: "black"
    Widget { id: uiwidget; x: 100; y: 100; width: 400; height: 100;
        // 关键在这里，当一个信号导出后他的相应的名字就是第1个字母大写，前面在加上on
        // 例如 clicked -- onClicked   colorchange --onColorchange;
        onSendOnButton: { uiwidget.changeText(textinput.text); }
    }
    Rectangle{
        x: 100; y: 20; width: 400; height: 30;  color: "blue"
        TextInput {id: textinput; anchors.fill: parent; color: "white" }
    }
}

说明：

这里实现的是当QPushButton按钮按下后，获取QML中TextInput上的文本，

对QLabel进行设置，关键点在于Widget中的信号函数sendOnButton, 他导出后在QML中

将引发的是onSendOnButton 只要在QML中对这个编写处理就可以实现，具体看代码。

1.假设

1.在c++中创建一个Person的对象，

2.在QML中获取并显示数据

3.在c++中改变数据后，显示的数据能进行相应的改变

也就是说我们实际是在c++中new一个对象出来，而把这个对象的数据在QML里面进行显示

2.具体代码

// person.h
#ifndef PERSON_H
#define PERSON_H
#include <QObject>
#include <QDeclarativeListProperty>
#include <QList>
#include <QColor>
class Person : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QString name READ getName WRITE setName NOTIFY sendNameChange)
    Q_PROPERTY(int age READ getAge WRITE setAge NOTIFY sendAgeChange)
public:
    explicit Person(QObject *parent = 0);
    QString getName(void) const;
    void setName(const QString& name);
    int getAge(void);
    void setAge(int age);
    // 一个简单的函数, 获取蓝色
    Q_INVOKABLE QColor getColor(void) const;
    Q_INVOKABLE void changeNameAndAge(void);
signals:
    void sendNameChange(void);
    void sendAgeChange(void);
private:
    QString     m_Name;
    int         m_Age;
};
#endif // PERSON_H

// person.cpp
#include "person.h"
//---------------------------------
//
Person::Person(QObject *parent) :
    QObject(parent), m_Name("unknow"), m_Age(0)
{
}
//---------------------------------
//
QString Person::getName(void) const
{
    return m_Name;
}
//---------------------------------
//
void Person::setName(const QString& name)
{
    m_Name = name;
    emit sendNameChange();
}
//---------------------------------
//
int Person::getAge(void)
{
    return m_Age;
}
//---------------------------------
//
void Person::setAge(int age)
{
    m_Age = age;
    emit sendAgeChange();
}
//---------------------------------
//
QColor Person::getColor(void) const
{
    return QColor(Qt::blue);
}
//---------------------------------
//
void Person::changeNameAndAge(void)
{
    setName("Luly");
    setAge(31);
}

// main.cpp
#include <QtGui/QApplication>
#include <QtDeclarative/QDeclarativeView>
#include <QtDeclarative/QDeclarativeEngine>
#include <QtDeclarative/QDeclarativeComponent>
#include <QtDeclarative/QDeclarativeContext>
#include "person.h"
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Person tmpPerson;
    tmpPerson.setName("Tom");
    tmpPerson.setAge(25);
    QDeclarativeView qmlView;
    qmlView.rootContext()->setContextProperty("ps",&tmpPerson);
    qmlView.setSource(QUrl::fromLocalFile("../UICtest/UICtest.qml"));
    qmlView.show();
    return a.exec();
}

// UICtest.qml
import Qt 4.7
Rectangle {
    width: 640
    height: 480
    Text { text: "Person name:" + ps.name; }
    Text { y: 20; text: "Person age:" + ps.age; }
    Rectangle{ x: 20; y: 40;  width: 20; height: 20; color: ps.getColor();}
    MouseArea{
        anchors.fill: parent;
        // 当鼠标按下后改变名字和年龄
        onClicked: { ps.changeNameAndAge(); }
    }
}

说明：

我们在c++中创建来一个对象，并且在把这个对象导出给QML调用用，我们设置来属性，QML中可以直接使用属性来进行赋值.

1.导出Person类中的属性

2.具体导出过程

1.导出Person一个颜色属性，一个int属性

注意

1. 当需要实现属性变化其他引用到此属性的属性也跟着变化的情况的话，需要设置属性相应的信号

2. 设置属性的时候，使用的类型必须是已经导出到QML中的类型

3.具体代码

// person.h
#ifndef PERSON_H
#define PERSON_H
#include <QObject>
#include <QColor>
class Person : public QObject
{
    Q_OBJECT
    // 设置设置属性的名字是 bgcolor
    // 对应读取函数名字 bgColor
    // 对应写函数名字 setBgColor
    // 属性发生改变后发送信号 sendBgColorChange
    Q_PROPERTY(QColor bgcolor READ getBgColor WRITE setBgColor NOTIFY sendBgColorChange)
   // 设置设置属性的名字是 count
   // 对应读取函数名字 getCount
   // 对应写函数名字 setCount
   // 属性发生改变后发送信号 sendCountChange
   Q_PROPERTY(int count READ getCount WRITE setCount NOTIFY sendCountChange)
public:
    explicit Person(QObject *parent = 0);
    QColor getBgColor(void) const;
    void setBgColor(const QColor& color);
    int getCount(void);
    void setCount(int count);
signals:
    void sendBgColorChange(void);
    void sendCountChange(void);
private:
    QColor  m_Color;
    int     m_Count;
};
#endif // PERSON_H

// person.cpp
#include "person.h"
//---------------------------------
//
Person::Person(QObject *parent) :
    QObject(parent), m_Color("blue"), m_Count(0)
{
}
//---------------------------------
//
QColor Person::getBgColor(void) const
{
    return m_Color;
}
//---------------------------------
//
void Person::setBgColor(const QColor& color)
{
    m_Color = color;
    emit sendBgColorChange();
}
//---------------------------------
//
int Person::getCount(void)
{
    return m_Count;
}
//---------------------------------
//
void Person::setCount(int count)
{
    m_Count = count;
    emit sendCountChange();
}

// main.cpp
#include <QtGui/QApplication>
#include <QtDeclarative/QDeclarativeView>
#include <QtDeclarative/QDeclarativeEngine>
#include <QtDeclarative/QDeclarativeComponent>
#include "person.h"
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    qmlRegisterType<Person>("People",1,0,"Person");
    //qmlRegisterType<Person>();
    QDeclarativeView qmlView;
    qmlView.setSource(QUrl::fromLocalFile("../UICtest/UICtest.qml"));
    qmlView.show();
    return a.exec();
}

// UICtest.qml
import Qt 4.7
import People 1.0 //如果是qmlRegisterType<Person>(); 导出就可以注释这条
Rectangle {
    width: 640
    height: 480
    color: per.bgcolor;
    Person{ id: per;}
    Text {
        id: textlabel;
        text: "text  " + per.count;
    }
    MouseArea{
        anchors.fill: parent;
        onClicked:{
            // 当鼠标按下后，由于属性上有信号，当属性发生改变后，
            // 所有引用此属性的值的都相应的发生改变
            per.bgcolor = "red";
            per.count = 20;
        }
    }
}

说明：

在person类中，设置了两个属性bgcolor, count ,他们分别在发送改变后调用自己对应的信号

具体看源代码，这里是设置来矩形框的颜色，文本框中文本。

1.导出Person类中的成员方法

2.具体导出过程

导出的方法有

1.使用Q_INVOKABLE

2.使用 槽机制

3.具体代码

// person.h
#ifndef PERSON_H
#define PERSON_H
#include <QObject>
class Person : public QObject
{
    Q_OBJECT
public:
    explicit Person(QObject *parent = 0);
    Q_INVOKABLE void FirstEcho(void);
public slots:
    void SecondEcho(void);
};
#endif // PERSON_H

// person.cpp
#include "person.h"
Person::Person(QObject *parent) :
    QObject(parent)
{
}
void Person::FirstEcho(void)
{
    // 简简单单打印一句话
    qDebug("call Person::FirstEcho");
}
void Person::SecondEcho(void)
{
    qDebug("call Person::SecondEcho");
}

// main.cpp
#include <QtGui/QApplication>
#include <QtDeclarative/QDeclarativeView>
#include <QtDeclarative/QDeclarativeEngine>
#include <QtDeclarative/QDeclarativeComponent>
#include "person.h"
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    qmlRegisterType<Person>("People",1,0,"Person");
    //qmlRegisterType<Person>();
    QDeclarativeView qmlView;
    qmlView.setSource(QUrl::fromLocalFile("../UICtest/UICtest.qml"));
    qmlView.show();
    return a.exec();
}

// UICtest.qml
import Qt 4.7
import People 1.0 //如果是qmlRegisterType<Person>(); 导出就可以注释这条
Rectangle {
    width: 640
    height: 480
    Person{ id: per;}
    MouseArea{
        anchors.fill: parent;
        onClicked:{
            per.FirstEcho();
            per.SecondEcho();
        }
    }
}

说明:

这里导出了两个函数分别是FirstEcho 和SecondEcho 两个函数，这两个函数本别是使用

FirstEcho使用使用 Q_INVOKABLE导出，SecondEcho直接使用槽。

调用函数在控制台输出一些信息，这里是在鼠标点击界面后出发的。

 int main(int argc, char *argv[])

 {

 QApplication app(argc, argv);

 QDeclarativeView view;

 view.rootContext()->setContextProperty("ls",new LS);

 view.setSource(QUrl::fromLocalFile("../QMLAPP/QMLtest.qml"));

 view.show();

 return app.exec();

 }

#define LS_H

#include <QObject>

#include <QColor>

class LS : public QObject

{

 Q_OBJECT

 Q_PROPERTY(QColor color READ getColor WRITE setColor NOTIFY colorChange)

public:

 LS(QObject *parent = 0);

 ~LS();

 // Q_INVOKABLE 用于导出函数，让qml能使用

 Q_INVOKABLE QString getText(void) const;

 // 用于属性

 QColor getColor(void) const;

 void setColor(const QColor &c);

signals:

 void sendMsg(const QString &s);

 // 用于属性

 void colorChange(void);

public slots:

 void echoMsg(const QString &s);

private:

 QString m_str;

 QColor m_Color;

};

#endif // LS_H

//LS.cpp

 LS::LS(QObject *parent)

 :QObject(parent),m_str("I am LS class"),m_Color(Qt::blue)

 {

 QObject::connect(this, SIGNAL(sendMsg(QString)), this, SLOT(echoMsg(QString)));

 }

 LS::~LS(){}

 QString LS::getText(void) const

 {

 return m_str;

 }

 // 用于属性

 QColor LS::getColor(void) const

 {

 return m_Color;

 }

 void LS::setColor(const QColor &c)

 {

 m_Color = c;

 }

 void LS::echoMsg(const QString &s)

 {

 qDebug(" %s ", s.toLocal8Bit().data());

 }

//----------------------------------------------------------------------
// QMLtest.qml
Rectangle{
 id: mainrect
 width: 400; height: 300;
 color: ls.color;
 Text {
 id: tls;
 text: "click this"
 }

 MouseArea{
 anchors.fill: parent;
 onClicked: {
 tls.text = ls.getText();
 ls.sendMsg(" ok ");
 }
 }

}