1. 说明：

QML开发界面是最近才开始流行，在之前的老项目中一般都是使用QWidget进行开发，其界面设计不是很美观，但能够实现的功能是挺多的，这些是QML无法实现的。如果想在QWidget的基础上对界面进行美化，则可以将QML界面嵌入到QWidget当中进行使用。与QML界面嵌入QWidget窗口这篇博客也有共通之处。
效果展示：

QWidget窗口加载QML界面

2. 实现方式：

将QML界面嵌入到QWidget窗口当中，主要利用到的控件是QQuickWidget小控件。因为要使用到QWidget，所以要在项目的.pro文件中加入quickwidgets库：QT += quickwidgets

2.1 第一步：

首先，创建一个QWidget框架的项目，并在界面当中拖入一个QQuickWidget控件，如下图所示：

2.2 第二步：

然后，创建一个QML文件用于加载到QWidget窗口中，因为用于承载qml页面的小控件是QQuickWidget，qml文件中根节点最好使用Item或者Rectangle，不要使用Window,可能会出错。本文章具体qml文件代码如下：

import QtQuick 2.15
import QtQuick.Controls 2.15Item {width: parent.widthheight: parent.heightvisible: truefunction toRed(){bck.color = "red"}function toBlue(){bck.color = "blue"}Rectangle{id:bckobjectName: "background"anchors.fill: parentcolor: Qt.rgba(0.0,0.0,0.0,0.5)}signal rectRed()signal rectBlue()Button{id:firstwidth: 100height: 50anchors.left: parent.leftanchors.leftMargin: 10anchors.verticalCenter: parent.verticalCentertext: "Red"onClicked: {rectRed()}}Button{id:secondwidth: 100height: 50anchors.right: parent.rightanchors.rightMargin: 10anchors.verticalCenter: parent.verticalCentertext: "Blue"onClicked: {rectBlue()}}
}

2.3 第三步：

加载QML文件之前，需要将QML文件以资源文件的形式放入到整个项目中进行使用。
在项目文件上右键鼠标，选择Add New…:

在弹出的窗口中选择***Qt -> Qt Resource File ***：

根据指引一步步将qml文件添加到资源文件中即可。

2.4 第四步：

在项目目录树中打开QWidget窗口对应的代码文件，在其中引入QML文件，在qml文件中定义了两个信号和两个函数，在widget窗口中对这两个信号进行连接，并在对应的槽函数中去调用qml中的函数，以改变qml界面的填充颜色。具体代码和注释如下：
Widget.h:

#ifndef WIDGET_H
#define WIDGET_H#include QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();public slots:void onRectRed();//槽函数，用于响应QML中的信号void onRectBlue();//槽函数，用于响应QML中的信号private:Ui::Widget *ui;
};
#endif // WIDGET_H

Widget.cpp:

#include "widget.h"
#include "ui_widget.h"
#include Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QUrl source("qrc:/qmls/qmlInWidget.qml");//加载QML文件ui->quickWidget->setResizeMode(QQuickWidget::SizeRootObjectToView );//设置QML界面整体填充QQuickWidget控件ui->quickWidget->setSource(source);//指定加载源QQuickItem* item = ui->quickWidget->rootObject();//获取quickwidget中的qml根对象connect(item,SIGNAL(rectRed()),this,SLOT(onRectRed()));//连接QML中的信号connect(item,SIGNAL(rectBlue()),this,SLOT(onRectBlue()));//连接QML中的信号}Widget::~Widget()
{delete ui;
}void Widget::onRectRed()
{QQuickItem* item = ui->quickWidget->rootObject();QMetaObject::invokeMethod(item,"toRed");//调用QML中的方法
}void Widget::onRectBlue()
{QQuickItem* item = ui->quickWidget->rootObject();QMetaObject::invokeMethod(item,"toBlue");//调用QML中的方法
}

持续更新中，请大家多多关注…