环境
系统: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=”的错误。