Qt学习笔记：把QtQuick作为控件嵌入到QtWidgets

环境

系统：Windows10 64位 家庭中文版
Qt版本：5.6.0 msvc2013 64位
编译器：Visual Studio 2013 专业版

目的

把用QML实现的界面嵌入到QtWidget，同时实现对QML属性的设置。

步骤

1.把要实现的QML窗口设计好，这里我实现了一个图片模糊的效果：
代码如下：

import QtQuick 2.3
import QtGraphicalEffects 1.0

Rectangle {
    width: 1920;
    height: 1080;

    visible: true property int m_nDisplayWidth: 960;
    property int m_nDisplayHeight: 540;

    Image {
        id: bg source: "qrc:/image/bg.JPG" width: parent.width height: parent.height visible: true;
    }

    Rectangle {
        id: displayArea;
        width: m_nDisplayWidth;
        height: m_nDisplayHeight;
        clip: true;
        anchors.centerIn: parent;

        FastBlur {
            source: bg width: source.width;
            height: source.height;
            radius: 32 x: - displayArea.x;
            y: - displayArea.y;
        }
    }
}

效果如图：

2.在QtWidgets中嵌入QtQuick：
a.在.pro文件中添加quickwidgets模块，如：

QT += quickwidgets

b.在工程中把.qml文件和图片（如果有用到图片的话），添加到资源文件，如：

c.用QQuickWidget作为QML窗口的容器，用QQuickItem来获取QML的对象，代码如下：

#include "qmlwidget.h"

#include 
#include 
#include 

QmlWidget::QmlWidget(QWidget *parent)
    : QWidget(parent)
{
    this->setWindowFlags(Qt::FramelessWindowHint);
    this->setAttribute(Qt::WA_TranslucentBackground);
    this->resize(1920, 1080);

    QQuickWidget* pWidget = new QQuickWidget(this);
    pWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
    pWidget->setSource(QUrl(QStringLiteral("qrc:/qml/main.qml")));
    pWidget->show();

    QQuickItem *item = pWidget->rootObject();
    item->setProperty("m_nDisplayWidth", 1920 * 0.4);
    item->setProperty("m_nDisplayHeight", 1080 * 0.4);

    QPushButton* pBtnResize = new QPushButton(this);
    pBtnResize->resize(100, 40);
    pBtnResize->move(this->width() - pBtnResize->width(), 0);
    pBtnResize->setText("resize");
    connect(pBtnResize, &QPushButton::clicked, [=]{
       //这里通过设置属性来改变模糊的面积
       if (m_bZoomIn)
       {
           m_bZoomIn = false;
           item->setProperty("m_nDisplayWidth", 1920 * 0.8);
           item->setProperty("m_nDisplayHeight", 1080 * 0.8);
       }
       else
       {
           m_bZoomIn = true;
           item->setProperty("m_nDisplayWidth", 1920 * 0.4);
           item->setProperty("m_nDisplayHeight", 1080 * 0.4);
       }
    });
}

QmlWidget::~QmlWidget()
{

}

效果如下：


注意事项：
1.资源文件的路径可能有改变，要特别注意；
2.在无边框、背景透明的窗口中可能会出现：”UpdateLayeredWindowIndirect failed for ptDst=”的错误。