qml嵌入到QWidget中的简单使用

//方法一 使用QQuickView 
//main.qml
import QtQuick 2.0

Rectangle {
    signal qmlSigClick()

    x : 200
    width: quickWidgetWidth
    height: quickWidgetHeight
    radius: quickWidgetWidth/2
    color: "green"
    Text {
        anchors.fill: parent
        id: name
        text: qsTr("qml")
        color: "white"
        font.pixelSize: 40
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }

    MouseArea{
        anchors.fill:parent
        onClicked: qmlSigClick()
    }

    function test(){
        console.log("test")
    }
}

//mainwindow.cpp
#include <QQuickView>
#include <QQmlContext>
#include <QQuickItem>

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    this->resize(600, 400);

    QQuickView *mQuickView = new QQuickView();


    QWidget *mQuickWidget = QWidget::createWindowContainer(mQuickView, this);
    //设置被嵌入的窗口大小和位置
     mQuickWidget->move(0,200);
     //mQuickWidget->setMinimumSize(80,30);
     //mQuickWidget->show(); // 显示qml
     mQuickWidget->resize(600,200);

     QQmlContext *mQuickContext = mQuickView->rootContext();// 用于与qml交互

     //首先进行读取，属性名：quickWidgetWidth、quickWidgetHeigh
     int width = mQuickContext->contextProperty("quickWidgetWidth").toInt();
     int hight = mQuickContext->contextProperty("quickWidgetHeight").toInt();
     qDebug()<<"width:"<<width;
     qDebug()<<"hight:"<<hight;

     //设置qml控件quickWidgetWidth、quickWidgetHeigh属性
     mQuickContext->setContextProperty("quickWidgetWidth", 200);
     mQuickContext->setContextProperty("quickWidgetHeight", 200);

     //读取显示，测试是否写入成功
     width = mQuickContext->contextProperty("quickWidgetWidth").toInt();
     hight = mQuickContext->contextProperty("quickWidgetHeight").toInt();
     qDebug()<<"width:"<<width;
     qDebug()<<"hight:"<<hight;

     mQuickView->setSource(QUrl("qrc:/main.qml"));
     QObject *pRoot = static_cast<QObject*>(mQuickView->rootObject());
     if(pRoot != nullptr)
     {
         connect(pRoot,SIGNAL(qmlSigClick()),this,SLOT(resiveFromQml()));
         connect(ui->pushButton,SIGNAL(clicked()),pRoot, SLOT(test()));
     }
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::resiveFromQml()
{
    qDebug() << "resiveFromQml";
}

//mainwindow.h
class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private:
    Ui::MainWindow *ui;

public slots:
    void resiveFromQml();
};

//方法二 使用QQuickWidget
//在窗口构造函数添加如下代码
QQuickWidget *qmlWidget = new QQuickWidget(QUrl("qrc:/main.qml"), this);
qmlWidget->setAttribute(Qt::WA_AlwaysStackOnTop);
qmlWidget->setClearColor(Qt::transparent);
qmlWidget->setResizeMode(QQuickWidget::SizeViewToRootObject);
qmlWidget->move(0, 200);
qmlWidget->setFixedSize(600, 200);
qmlWidget->show();

//qml
import QtQuick 2.0

Rectangle {
    signal qmlSigClick()

    x : 200
    width: 200
    height: 200
    radius: 200/2
    color: "green"
    Text {
        anchors.fill: parent
        id: name
        text: qsTr("qml")
        color: "white"
        font.pixelSize: 40
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }

    MouseArea{
        anchors.fill:parent
        onClicked: {
            console.log("click")
            qmlSigClick()
        }
    }

    function test(){
        console.log("test")
    }
}

运行测试效果如下图：