Qt Qml嵌入Widget以及Qml與Widget交互


這里是在Win10下,使用Qt5.7.0(cpp+qml)實現Qml嵌入Widget以及Qml與Widget交互。

QQuickWidget類,可以解決此問題。

 

1、先在pro是加入

 

QT += quickwidgets

2、新建QmlWidget類,並繼承QWidget。

main.cpp如下

 

#include <QApplication>
#include "qmlwidget.h"
 
        
int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    QmlWidget qmlWidget;
    return app.exec();
}

3、qmlwidget.h如下

 

#ifndef QMLWIDGET_H
#define QMLWIDGET_H
#include <QQuickWidget>
#include <QQmlEngine>
#include <QVBoxLayout>
 
        
class QmlWidget : public QWidget
{
    Q_OBJECT
public:
    explicit QmlWidget(QWidget *parent = 0);
private:
    QVBoxLayout * layout;
    QQuickWidget * quickWidget;
signals:
    void sigWidget(void);
public slots:
    void slotWidget(void);
    void btnClicked(void);
};
 
         
         
        
#endif // QMLWIDGET_H

4、qmlwidget.cpp如下

 

#include "qmlwidget.h"
#include <QDebug>
#include <QPushButton>
QmlWidget::QmlWidget(QWidget *parent) : QWidget(parent) {
    quickWidget = new QQuickWidget();
    quickWidget->setSource(QUrl("qrc:///main.qml"));
 
        
    layout = new QVBoxLayout(this);
    QPushButton *btn1 = new QPushButton(this);
    btn1->setText("widget btn");
    layout->addWidget(btn1);
 
        
    connect(btn1,SIGNAL(clicked(bool)),this,SLOT(btnClicked()));
    QObject * obj = (QObject*)quickWidget->rootObject();
    connect(obj,SIGNAL(qmlClicked()),this,SLOT(slotWidget()));
    connect(this,SIGNAL(sigWidget()),obj,SIGNAL(widgetClicked()));
 
         
         
        
    quickWidget->setLayout(layout);
    quickWidget->show();
}
void QmlWidget::slotWidget() {
    qDebug()<<"qml sig to widget slot";
    emit sigWidget();
}
void QmlWidget::btnClicked() {
    qDebug()<<"widget btn clicked";
}
 
        

5、main.qml如下

 

import QtQuick 2.4
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2
 
        
Rectangle {
    id : root;
    width: 300
    height: 300
    color: "yellow"
    signal qmlClicked()
    signal widgetClicked()
    onWidgetClicked: {
        console.log("widget sig to qml slot")
    }
    Button {
        id : qmlBtn
        anchors.top: parent.top
        text : "qml btn"
        onClicked: {
            console.log("qml btn clicked")
        }
    }
    Button {
        anchors.left: qmlBtn.right
        anchors.leftMargin: 8
        text : "connect btn"
        onClicked: {
            qmlClicked()
        }
    }
}
 
        

6、運行效果如下

7、注意事項。

quickWidget的rootObject()是main.qml中的根對象,也就是root,它要轉換為QObject*類型才能使用connect。

quickWidget不能直接連接到qml的槽上,但是可以連接到qml的信號上,讓信號去觸發qml的槽。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM