Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

使用C++创建新的QML类型

From Wiki
Jump to: navigation, search
Article Metadata

兼容于
平台:
Symbian

文章
zhouhl 在 23 Jan 2011 创建
最后由 hamishwillee 在 13 Jun 2012 编辑

Contents

引言

Qt Quick为我们提供了许多内建的QML Elements,其功能可以满足我们绝大部分的需要。但有时我们想制作出自己的QML类型,从而方便自己程序的使用,这是完全可以做到的。做到这点总共有两种方法:一种方法是我们制作新的QML Component,第二种方法是我们使用C++来创建新的QML类型。这第二种方法是更加强大的。本文就详细为大家介绍一下。同时大家也可以参考:Chapter 1: Creating a New Type


新QML类型

我们要创建的QML类型叫"PieChart",它有两个属性:name 和 color。我们将把它放入版本号为1.0的 "Charts" 模块中。
我们希望在QML中这样使用我们的新类型PieChart

import Charts 1.0
 
PieChart {
width: 100; height: 100
name: "A simple pie chart"
color: "red"
}


C++类

要完成这一工作,我们需要用一个C++的类来封装PieChart 类型以及它的两个属性。由于QML大量利用了Qt的meta object system,这个C++类必须要:

  • 继承自QObject
  • 使用Q_PROPERTY 声明它的属性

下面是在piechart.h 中定义的PieChart 类:

#include <QDeclarativeItem>
#include <QColor>
 
class PieChart : public QDeclarativeItem
{
Q_OBJECT
Q_PROPERTY(QString name READ name WRITE setName)
Q_PROPERTY(QColor color READ color WRITE setColor)
 
public:
PieChart(QDeclarativeItem *parent = 0);
 
QString name() const;
void setName(const QString &name);
 
QColor color() const;
void setColor(const QColor &color);
 
void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = 0);
 
private:
QString m_name;
QColor m_color;
};

这个类继承自QDeclarativeItem。这是因为我们想重写QDeclarativeItem::paint() 这个方法来进行绘制。如果这个类仅仅是代表一些数据类型,并不需要实际的显示,那么我们直接让它继承QObject就可以了。当然,如果我们想扩展现有的基于QObject的类的功能,那么我们也可以从那个类继承下来。

PieChart 这个类使用Q_PROPERTY宏定义了两个属性name 和 color,并重写了QDeclarativeItem::paint()。在piechart.cpp 这个类的实现中简单的设置和返回了m_name 和 m_color 的值作为属性,并且实现了 paint() 方法绘制了一个简单的扇形图。同时它也关闭了QGraphicsItem::ItemHasNoContents 标志从而允许绘制:

 PieChart::PieChart(QDeclarativeItem *parent)
: QDeclarativeItem(parent)
{
// need to disable this flag to draw inside a QDeclarativeItem
setFlag(QGraphicsItem::ItemHasNoContents, false);
}
...
void PieChart::paint(QPainter *painter, const QStyleOptionGraphicsItem *, QWidget *)
{
QPen pen(m_color, 2);
painter->setPen(pen);
painter->setRenderHints(QPainter::Antialiasing, true);
painter->drawPie(boundingRect(), 90 * 16, 290 * 16);
}


在QML中使用新类型

现在已经定义好了PieChart 类型,那么我们就可以在QML中使用它了。app.qml 文件创建了一个PieChart item 并且使用一个标准的QML Text item来显示扇形图表的名字:

import Charts 1.0
import QtQuick 1.0
 
Item {
width: 300; height: 200
 
PieChart {
id: aPieChart
anchors.centerIn: parent
width: 100; height: 100
name: "A simple pie chart"
color: "red"
}
 
Text {
anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin: 20 }
text: aPieChart.name
}
}

需要注意的是,虽然在QML中给color 设定的是一个字符串,但是它会针对PieChart 的color 属性自动装换成 QColor对象。许多基本类型都支持自动装换。例如,字符串"640x480" 会被自动装换为一个 QSize值。


运行使用了新类型的qml文件

我们将创建一个C++应用程序,它使用QDeclarativeView 来运行和显示app.qml。这个应用程序必须使用qmlRegisterType()函数来注册PieChart 类型,从而使得可以从QML中访问这个类型。如果你不注册的话,app.qml就无法使用PieChart 。 这是应用程序的main.cpp:

#include "piechart.h"
#include <qdeclarative.h>
#include <QDeclarativeView>
#include <QApplication>
 
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
 
qmlRegisterType<PieChart>("Charts", 1, 0, "PieChart");
 
QDeclarativeView view;
view.setSource(QUrl::fromLocalFile("app.qml"));
view.show();
return app.exec();
}

这里调用了qmlRegisterType() 来注册 C++ 类 PieChart 作为QML 中的PieChart 类型,并将其放入版本号为1.0的"Charts"模块中。

最后我们需要在.pro 工程文件中包含所有的文件以及 declarative 库:

QT += declarative
 
HEADERS += piechart.h
SOURCES += piechart.cpp \
main.cpp

我们现在编译和运行这个程序:

SimpleChart1.png

大家自己可以试一下Qt 目录 examples/tutorials/extending/chapter1-basics 中的本程序代码。

相关链接

This page was last modified on 13 June 2012, at 10:52.
290 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×