qwidget嵌入qml界面

说明

在我们日常使用qt/C++的界面开发过程中，通常想要自定义、实现某些特定的非常美观、炫酷界面，使用qwidget的方式是比较麻烦且复杂的，如果滑动、动画等操作，qwidget需要重写事件，且还需要定义滑动的逻辑。
但是，Qt Quick 使用 QML 构建的一套类库几乎完美补足了此问题，如果只是做界面，使用qml还是非常完美的。QML 是一种基于 JavaScript 的声明式脚本语言，其性能相对C++来说性能还是稍微低了点，不过qt5.2之后版本对qml引擎进行了优化，性能还是提升了很多。

在Qt5中推出了一个新的渲染底层 Scene Graph，来替代Qt4时期的 Graphics View。如果大家使用过Qt5的 Qt Quick 模块，你会感觉 Qt Quick 的画面渲染速度和效率比Qt4的 GraphicsView 来说好了很多。主要原因是在渲染部分精简了渲染堆栈，并且充分利用显卡加速，将渲染负担转移到GPU来进行，实现了负载均衡。
原文链接：https://blog.csdn.net/qq_34139994/article/details/105369719

本文就是写明如何在基于qwidget开发的程序中嵌入优美的qml界面，毕竟在嵌入式开发中，还是不能抛弃C++的，当然项目也完全可以实现业务（C++）与界面（qml）进行分离操作，但是我们有时候在qwidget开发的基础上，需要使用某个C++比较难实现，而qml比较容易实现的控件呢？比如键盘或者一些滑动、动画的控件？这样就需要查看本文了。

其实qwidget与qml都是窗口渲染方式不同，导致无法直接相互嵌入。

原理

1、使用QQuickView 类提供一个用于显示 Qt Quick 用户界面的窗口。
2、使用QQmlContext 类定义 QML 引擎中的上下文。通过该类可实现C++和qml属性数据的交互，比如读取qml控件中的公开属性（成员变量）。
3、使用QWidget::createWindowContainer()函数，将QtQuick组件嵌入到QWidget中，该函数直接返回qwidget指针。

实现

1、通过QQuickView 类添加qml控件代码文件：

    QQuickView *mQuickView = new QQuickView();
    mQuickView->setSource(QUrl("qrc:/testQml.qml"));

2、将qml控件导入QWidget中：

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

3、设置qml控件成员及读取其值

	QQmlContext *mQuickContext = mQuickView->rootContext();// 用于与qml交互
	
	//首先进行读取，属性名：quickWidgetWidth、quickWidgetHeigh
    int width = mQuickContext->contextProperty("quickWidgetWidth").toInt();
    int hight = mQuickContext->contextProperty("quickWidgetHeigh").toInt();
    qDebug()<<"width:"<<width;
    qDebug()<<"hight:"<<hight;
    
	//设置qml控件quickWidgetWidth、quickWidgetHeigh属性
    mQuickContext->setContextProperty("quickWidgetWidth", 30);
    mQuickContext->setContextProperty("quickWidgetHeight", 30);
   	
   	//读取显示，测试是否写入成功
    width = mQuickContext->contextProperty("quickWidgetWidth").toInt();
    hight = mQuickContext->contextProperty("quickWidgetHeigh").toInt();
    qDebug()<<"width:"<<width;
    qDebug()<<"hight:"<<hight;

4、测试用的testQml.qml文件：

import QtQuick 2.0
 
Rectangle {
    x: 0; // 缺省为0
    y: 0; // 缺省为0
    width: quickWidgetWidth;   // width是宽度
    height: quickWidgetHeight; // height是高度
    color: "red";
}