QWidget 添加 qml 及signal-slot连接

QWidget 添加 qml 及signal-slot连接

 

简介

最近在学习qml，想要把qml加入到QWidget中，实现一些界面操作。以下做一个简单的记录：

具体步骤

1、.pro 文件添加

QT       += core gui quickwidgets qml

2、创建QML页面  (hello.qml)

import QtQuick 2.9
import QtQuick.Controls 2.2

Rectangle{
    id: root
    width: 400
    height: 300

    signal sigQmlReceiveStr(string str) //定义接收信号(from QWidget)
    signal sigQmlSendStr(string str)    //定义发送信号(to QWidget)

    Text {
        id: text
        anchors.centerIn: parent
        color: "red"
        font{pixelSize: 30}
        text: qsTr("hello world!")
    }

    onSigQmlReceiveStr: {               //信号对应槽函数
        text.text = str
        root.sigQmlSendStr("received:" + str)   //调用信号
    }
}

qml中singal-slot简单说明

自定义信号   

 signal <name>[([<type> <parameter name>[, ...]])]

响应的槽函数 

 on<Signal>: {  do something .... }

这里注意一下，Signal 必须首字母大写。冒号后边如果仅是单语句，可以不用大括号{}。

ps: 这里只做简单的说明，其他调用方式后面我会继续整理，敬请关注哦~

3、将hello.qml添加到.qrc文件中

（可参考qt添加资源文件，网上材料一大堆，这里就不巴拉巴拉咯，小伙伴们自己找度娘啦~）

4、widget.h 文件中添加signal/slot，源码如下（示例）：

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

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

private:
    Ui::Widget *ui;

signals:
    void sigSendToQml(QString);         //信号(to qml)

private slots:
    void slotReceiveFormQml(QString);   //槽（from qml）
    void on_send_clicked();
};

#endif // WIDGET_H

5.widget.cpp 实现相关代码，源码如下（示例）：

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);

    //1、加载qml
    ui->quickWidget->setFocus();
    ui->quickWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
    ui->quickWidget->setSource(QUrl("qrc:/qml/scroll"));

    //2、singal-slot 实现QWidget与qml的简单交互
    QObject *qmlObject = (QObject*)ui->quickWidget->rootObject();
    connect(this,SIGNAL(sigSendToQml(QString)),qmlObject,SIGNAL(sigQmlReceiveStr(QString)));
    connect(qmlObject,SIGNAL(sigQmlSendStr(QString)),this,SLOT(slotReceiveFormQml(QString)));
}

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

void Widget::on_send_clicked()
{
    emit sigSendToQml(ui->lineEdit->text());
}

void Widget::slotReceiveFormQml(QString str)    //接收qml信号的槽函数
{
    qDebug() << "str=" << str;
}

6、图片示例   

widget窗体输入文本，点击按钮可发送至qml进行显示

    

 

---

总结

这里只是简单教会大家QWidget 中加载qml ,更加复杂的界面实现及通信还需要继续研究，一起努力吧~