環境

系統：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 <QQuickWidget>
#include <QQuickItem>
#include <QPushButton>

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=”的錯誤。