上一篇文章讲了如何编译QCefView库,现在讲如何在qml项目中用这个库,当然在qt widgets项目中调用是很容易的,这里就不多讲了,另外我的QT版本是5.9.8
这里我演示一个demo,开始运行弹出一个qml界面,qml界面有一个按钮,点击按钮则弹出一个嵌入了QCefView库的qt widget界面,如图:
1.打开qt creator,文件->新建文件或项目->Qt Quick Application -Empty,我的项目名为QmlCefDemo,如图:
2.将customcefview.h/.cpp和编译好的out目录下的QCefView文件夹拷贝到根目录下,我重命名为QCefViewSDK
3.右键项目名称->add new ->Qt 设计师界面类->Dialog without buttons,然后直接下一步直到完成(我取名为cefdlg),然后在设计界面拖入一个Horizontal Layout控件,id为horizontalLayout,然后右键布局为水平布局
4.由于我们用到了QWidget类,因此要把必要的QT库(t5Cored.lib,Qt5Guid,lib,qtmaind.lib,Qt5Widgetsd.lib)添加到我们的(debug)项目中,当然还有QCefView.lib
比如添加t5Core.lib:右键项目->添加库…->外部库,->选择你QT安装目录下对应的lib文件,由于我是windows平台,所有我把linux和mac取消了,然后采用静态链接,点击确定,其它库添加方式依葫芦画瓢(QCefView.lib添加还要勾选debug或release子目录下的库)
5.添加好后 .pro文件类似这样,当然我把多余的删掉了
6.右键项目,点击执行qmake,然后重新构建,此时应该会提示如图:
鼠标放在cefdlg.cpp文件下的#include "ui_cefdlg.h"按f2键,弹出如下提示:
因此我用everything搜索到ui_cefdlg.h文件,然后拷贝到提示目录下。
再右键项目重新构建。
7.接下来是添加cefdlg.h/.cpp代码
cefdlg.h
#ifndef CEFDLG_H
#define CEFDLG_H
#include <QtWidgets/QDialog>
#include "customcefview.h"
namespace Ui {
class CefDlg;
}
class CefDlg : public QDialog
{
Q_OBJECT
public:
explicit CefDlg(QWidget *parent = nullptr);
~CefDlg();
private:
Ui::CefDlg *ui;
CustomCefView* cefview;
};
#endif // CEFDLG_H
cefdlg.cpp
#include "cefdlg.h"
#include "ui_cefdlg.h"
CefDlg::CefDlg(QWidget *parent) :
QDialog(parent),
ui(new Ui::CefDlg)
{
ui->setupUi(this);
cefview = new CustomCefView("https://www.baidu.com", this);
ui->horizontalLayout->addWidget(cefview);
}
CefDlg::~CefDlg()
{
delete ui;
}
8.添加一个类creg,用来在main函数中注册cefdlg类到qml中
creg.h
#ifndef CREG_H
#define CREG_H
#include <QObject>
class CReg : public QObject
{
Q_OBJECT
public:
explicit CReg(QObject *parent = nullptr);
public:
Q_INVOKABLE void ShowCefViewDlg();
signals:
public slots:
};
#endif // CREG_H
creg.cpp
#include "creg.h"
#include <qdebug.h>
#include "cefdlg.h"
CReg::CReg(QObject *parent) : QObject(parent)
{
}
void CReg::ShowCefViewDlg()
{
CefDlg dlg;
dlg.exec();
}
9.然后是main.cpp,main函数中只能用QApplication ,不能用QGuiApplication
#include <QQmlApplicationEngine>
#include <QtWidgets/QApplication>
#include "creg.h"
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QApplication app(argc, argv);
qmlRegisterType<CReg>("CRegPack", 1, 0, "CReg");
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
return app.exec();
}
10,最后是main.qml文件
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.2
import CRegPack 1.0
Window {
width: 360;
height: 360;
visible: true;
Rectangle{
id: id_rect
width: 160
height: 80
color: "blue"
Text {
text: qsTr("点击打开Qwidget窗口")
}
MouseArea{
anchors.fill: parent
onClicked:creg.ShowCefViewDlg();
}
}
CReg{
id:creg
}
}
11.然后构建,成功后将out\QCefView\bin\Debug或release目录下的所有文件拷贝到我们项目可执行文件的生成目录下,另外还要单独拷贝t5Cored.dll,Qt5Guid,dll,qtmaind.dll,Qt5Widgetsd.dll到我们项目可执行文件的生成目录下
我的项目图
生成目录图:
最后,当发现编译不过的时候就右键项目->执行qmake试试。另外需要说明的一点是当关闭嵌入了QCefview的窗口的时候其实后台进程并没有关闭,这个在QCefviewTest也是这样,所以在这个QmlCefDemo里也是这样,接下来我就会研究这个问题出在哪。
------------------------------------分割线------------------------------
补充customcefview.hpp代码
customcefview.h
#ifndef CUSTOMCEFVIEW_H
#define CUSTOMCEFVIEW_H
#include <include/QCefView.h>
#include <include/QCefQuery.h>
#include <QtCore>
#include <QtNetwork/QNetworkAccessManager>
#include <QtNetwork/QNetworkReply>
#include <QtNetwork/QHttpMultiPart>
class CustomCefView
: public QCefView
{
Q_OBJECT
public:
CustomCefView(const QString& url, QWidget *parent);
~CustomCefView();
protected:
virtual void onQCefUrlRequest(const QString& url) override;
virtual void onQCefQueryRequest(const QCefQuery& query) override;
virtual void onLoadStart(const QString& url) override;
public:
void changeColor();
signals:
void sigLoadStart(bool bLogin);
};
#endif // CUSTOMCEFVIEW_H
customcefview.cpp
#include <windows.h>
#include <QMessageBox>
#include <QColor>
#include "customcefview.h"
#include "globle.h"
CustomCefView::CustomCefView(const QString& url, QWidget* parent)
: QCefView(url, parent)
{}
CustomCefView::~CustomCefView()
{
}
void
CustomCefView::changeColor()
{
qsrand(::GetTickCount());
QColor color(qrand());
QCefEvent event("colorChangedEvent");
event.setStringProperty("color", color.name());
broadcastEvent("colorChange", event);
}
void
CustomCefView::onQCefUrlRequest(const QString& url)
{
QString title("QCef Url Request");
QString text = QString("Current Thread: QT_UI\r\n"
"Url: %1")
.arg(url);
QMessageBox::information(this->window(), title, text);
}
void
CustomCefView::onQCefQueryRequest(const QCefQuery& query)
{
QString title("QCef Query Request");
QString text = QString("Current Thread: QT_UI\r\n"
"Query: %1")
.arg(query.reqeust());
QMessageBox::information(this->window(), title, text);
QString response = query.reqeust().toUpper();
query.setResponseResult(true, response);
responseQCefQuery(query);
}
void
CustomCefView::onLoadStart(const QString& url)
{
}