Qt5官方demo解析集15——Chapter 1: Creating a New Type

本系列所有文章可以在这里查看http://blog.csdn.net/cloud_castle/article/category/2123873

前面我们说到了QML的粒子系统，它可以创造丰富多彩的粒子特效。但是更多的情况下，我们的QML界面是配合C++进行工作的：QML负责界面渲染，C++负责逻辑事务。甚至有时，我们还会利用QML来绘制C++代码中定义的可视化组件，或者使用C++代码来访问QML中对象的属性等。从这篇博文开始，我们介绍了Qt官方Demo中的“Chapter”系列，它介绍了在QML文件中使用一个C++类的方法。接下来，我们会介绍Extending QML系列，它则向我们展示了如何使用C++代码访问QML对象。

OK，接下来先看Chapter的第一个demo：Creating a New Type

先看下工程目录：

可以看到，在这个工程中有一个自定义的piechart类，它继承自QQuickPaintedItem，并定义了自己的绘制效果。在main函数中我们将这个PieChart类注册为一个qml类型，并赋予其一个命名空间"Charts"。qml文件放在资源文件中，名为app.qml，在这个文件里我们使用了这个piechart，并绘制在我们的窗口上。

首先来看piechart.h:

#ifndef PIECHART_H
#define PIECHART_H

//![0]
#include <QtQuick/QQuickPaintedItem>
#include <QColor>

class PieChart : public QQuickPaintedItem // 为了基于QPainter API实现自定义的绘制效果，我们需要继承这个类。如果不需要使用QPainter API，我们可以继承QQuickItem，甚至如果连可视化也不需要，QObject以及它的子类都可以作为我们继承的对象
{
    Q_OBJECT                              // 因为需要使用到Qt的元对象系统
    Q_PROPERTY(QString name READ name WRITE setName)      // 注册两个自定义属性
    Q_PROPERTY(QColor color READ color WRITE setColor)

public:
    PieChart(QQuickItem *parent = 0);     // 作为可视化组件我们需要将其父对象设置为QQuickItem

    QString name() const;                 // 定义属性的读写函数
    void setName(const QString &name);

    QColor color() const;
    void setColor(const QColor &color);

    void paint(QPainter *painter);         // 最后我们重载QQuickPaintedItem的paint函数，实现我们的自定义绘图

private:
    QString m_name;
    QColor m_color;
};
//![0]

#endif

实现代码如下piechart.cpp:

#include "piechart.h"
#include <QPainter>

//![0]
PieChart::PieChart(QQuickItem *parent)
    : QQuickPaintedItem(parent)
{
}
//![0]

QString PieChart::name() const
{
    return m_name;
}

void PieChart::setName(const QString &name)
{
    m_name = name;
}

QColor PieChart::color() const
{
    return m_color;
}

void PieChart::setColor(const QColor &color)
{
    m_color = color;
}

//![1]
void PieChart::paint(QPainter *painter)
{
    QPen pen(m_color, 2);
    painter->setPen(pen);
    painter->setRenderHints(QPainter::Antialiasing, true);
    painter->drawPie(boundingRect().adjusted(1, 1, -1, -1), 90 * 16, 290 * 16); // 饼状图在矩形范围内的位置与角度。角度的精度为1/16度。
}
//![1]

接下来，我们需要将这个类注册为QML类型main.cpp:

#include "piechart.h"
#include <QtQuick/QQuickView>
#include <QGuiApplication>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    qmlRegisterType<PieChart>("Charts", 1, 0, "PieChart"); // 我们使用模板函数注册了这个类型，"Charts"为import的命名空间，PieChart为类型名，1,0即是版本号1.0。

    QQuickView view;                                  // 然后创建一个QQuickView来显示QML组件
    view.setResizeMode(QQuickView::SizeRootObjectToView);      // 窗口大小设置为根目录大小
    view.setSource(QUrl("qrc:///app.qml"));                    // 调用资源中的app.qml
    view.show();
    return app.exec();
}

最后就是我们的QML文件了app.qml:

import Charts 1.0              // 首先我们引入上面定义的命名空间
import QtQuick 2.0

Item {
    width: 300; height: 200

    PieChart {                 // 接着我们就可以使用"PieChart"这个类型
        id: aPieChart
        anchors.centerIn: parent
        width: 100; height: 100
        name: "A simple pie chart"
        color: "red"          // color属性会与QColor类型自动对应起来，很多属性有这种对应关系
    }

    Text {                   // 然后再定义一个Text来显示PieChart的name属性的值
        anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin: 20 }
        text: aPieChart.name
    }
}

最后我们运行，这个PieChart就被绘制出来了~