Qt Quick 学习笔记 5.30

这大概会成为“一周突破Qt + QML "编程系列

1.debug 的使用

• Header: #include
• qmake: QT += core
• basic use:

   qDebug() << "Date:" << QDate::currentDate();
   qDebug() << "Types:" << QString("String") << QChar('x') 
                   << QRect(0, 10, 50, 40);
   qDebug() << "Custom coordinate type:" << coordinate;

---

2.QQuickImageProvider Class的使用

• Header: #include
• qmake: QT += quick
• Since: Qt 5.0
• Inherits: QQmlImageProviderBase
• Inherited By:QQuickAsyncImageProvider
• public funciton:
  有两个虚函数
  • virtual QImage requestImage(const QString &id, QSize size, const QSize &requestedSize*)
    用于返回Qimage类型，其中：
  • id 对应qml中image的source，例如在下面的main.qml中，source：“source: "image://myprovider/yellow"",则id是source
  • requestedSize 是Image Item的尺寸，如果image 中定义了width和height属性，则该宽和长会传给requesetedSzie
  • size
• virtual QPixmap *requestPixmap (const QString &id, QSize size, const QSize &requestedSize)
  用于返回qpixmap 类型
• examples:

//myprovider.h
#ifndef MYPROVIDER_H
#define MYPROVIDER_H

#include 
#include 
#include 
#include 
class MyProvider : public QQuickImageProvider
{
public:
    MyProvider();
    ~MyProvider();
    QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize);
    //requestPixmap 是指返回qpixmap
};

#endif // MYPROVIDER_H

//myprovider.cpp
#include "myprovider.h"
#include
#include
MyProvider::MyProvider():
    QQuickImageProvider(QQuickImageProvider::Pixmap)
{
}

MyProvider::~MyProvider(){
}

QPixmap MyProvider::requestPixmap(const QString &id, QSize *size, const QSize &requestedSize)
{
    int width = 100;
    int height = 50;

    if (size)
        *size = QSize(width, height);
    QPixmap pixmap(requestedSize.width() > 0 ? requestedSize.width() : width,
                   requestedSize.height() > 0 ? requestedSize.height() : height);
    pixmap.fill(QColor(id).rgba());
    qDebug()<

//main.cpp
#include 
#include 
#include "myprovider.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    MyProvider *imgprovider = new MyProvider();
    QQmlApplicationEngine engine;
    engine.addImageProvider("myprovider",imgprovider);
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    return app.exec();
}

//main.qml
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true
    width: 800
    height: 600
    Column{
        anchors.centerIn: parent
        Image{
            id:img  
            width: 200
            height: 100
            source: "image://myprovider/yellow"
            //MyProvider::requestPixmap(***)的id是yellow
        }
        Image {
            id: img2
            source: "image://myprovider/green"
        }
    }
}

3 .qquickview

• usage:

QQuickView *view = new QQuickView;
view->setSource(QUrl::fromLocalFile("myqmlfile.qml"));
view->show();

4.使用插件拓展QML功能

• QML插件配置（）

• 解决“ module "myplugin" is not installed” 的问题

 1. 目录结构：
  QMLPluginTest
      | - myplugin // 该目录下需含有qmldir插件和自定义的qml文件
            | - MyRect.qml  // 自定义的qml文件
            | - qmldir
      | - app
            | -  main.qml // 里面使用了MyRect组件

2.app.pro的配置
      添加：QML_IMPORT_PATH = $$PWD/../ 
      其中：$$PWD指得是源文件的配置目录，此处让main.qml可以找到myplugin所在目录（目录为
myplugin,组件名和目录名应该相同）

3.qmldir 的内容:
module myplugin
MyRect 1.0 MyRect.qml

4.app工程中，在main.cpp中添加如下代码，从而找到组件：
    QQmlApplicationEngine engine;
    engine.addImportPath("E:\\dev\\QT\\QML\\QMLPluginText"); //该目录下，能找到和模块名相同的文件夹
名，模块存在文件夹下（即myplugin目录下，有myplugin模块中定义的qml文件，参考上面的目录结构）
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));