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 ,更加复杂的界面实现及通信还需要继续研究,一起努力吧~