qml学习之qwidget与qml结合使用并调用信号槽交互

学习qml系列之一

说明：
学习qml系列之qwiget和qml信号槽的交互使用，并在qwidget中显示qml界面

在qml中发送信号到qwidget里
在qwidget里发送信号给qml

在qwidget里面调用qml界面方式

方式一：使用QQuickView
这个是Qt5.0中提供的一个类，继承自QQickWindow中，用来显示qt quick用户界面:

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

QQuickView基于QWindow，需要转换成 QWidget才能使用，还需要如下转换

     QQuickView *pView = new QQuickView();QWidget *Widget = QWidget::createWindowContainer(pView, this);pView->setResizeMode(QQuickView::SizeRootObjectToView);pView->setSource(QUrl("qrc:/main.qml"));

这样后面能直接调用由qml转换成的QWidget界面了。

方式二：使用QQuickWidget

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

该方法在Qt5.3中提供的一个类，继承自QWidget,是QQuickWidget一个很方便的包装器，用于显示Qt Quick用户界面

源码：
qml文件源码：

import QtQuick 2.1Rectangle {id: rootcolor: "green"width: 200height: 200// 发送给 Qt Widgets 的信号signal qmlSignal// 从 Qt Widgets 接收到的信号signal cSignal//信号的名称不能以大写开头Text {id: myTexttext: "Click me"font.pointSize: 14anchors.centerIn: parent}MouseArea {anchors.fill: parentonClicked: qmlSignal()}// 信号处理程序（处理从 Qt Widgets 接收到的信号）onCSignal: {root.color = "blue"myText.text = "Call the qml signal handler"}
}

注意：qml中信号的名称不能以大写开头，然后添加到Qt的资源文件中

添加qml quick

QT       += core gui qml quick

#include "widget.h"
#include "ui_widget.h"
#include "widget.h"
#include <QQuickView>
#include <QVBoxLayout>
//#include <QQuickWidget>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{
//    ui->setupUi(this);resize(300, 300);// 方式一QQuickView *pView = new QQuickView();QWidget *pWidget = QWidget::createWindowContainer(pView, this);pView->setResizeMode(QQuickView::SizeRootObjectToView);pView->setSource(QUrl("qrc:/main.qml"));// 方式二
//    QQuickWidget *pWidget = new QQuickWidget();
//    pWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
//    pWidget->setSource(QUrl("qrc:/main.qml"));m_pButton = new QPushButton(this);m_pButton->setText("Qt Widgets...");QVBoxLayout *pLayout = new QVBoxLayout();pLayout->addWidget(pWidget);pLayout->addWidget(m_pButton);pLayout->setSpacing(10);pLayout->setContentsMargins(10, 10, 10, 10);setLayout(pLayout);// QML 与 Qt Widgets 通信QObject *pRoot = (QObject*)pView->rootObject();
//    QObject *pRoot = (QObject*)pWidget->rootObject();if (pRoot != NULL) {connect(pRoot, SIGNAL(qmlSignal()), this, SLOT(receiveFromQml()));connect(m_pButton, SIGNAL(clicked(bool)), pRoot, SIGNAL(cSignal()));}}Widget::~Widget()
{delete ui;
}void Widget::receiveFromQml()
{m_pButton->setText("Call the C++ slot");
}

由于我使用的版本时5.14.1版本，用的QQuickView类

效果如下图