1、关键字:Qt widget、qml、image
2、首先我们创建一个Qt widgets application,给它工程名称CallQml,然后一路下一步创建完成;
3、在CallQml.pro中添加
QT += qml quick
QT += quickwidgets
4、双击mainwindow.ui,在设计窗口中随意添加一个控件,我们添加一个button吧,然后在窗口上点击右键,选择布局,选择栅格布局,可以看到这个控件就最大化了,这时候窗口中的任何控件都可以随着窗口最大化、最小化变化了;
然后删除这个button,因为我们这个实例中并不需要这个button,为什么在这里需要添加这个控件然后又删除呢?是因为如果窗口中一个控件都没有时,点击右键是不能给它加上布局的。
5、添加图片和qml资源
在CallQml工程下创建目录image和qml,把工程需要的图片放到image下,在qml目录下创建空文本文件main.qml、Cloud.qml
右键点击res.qrc,点击Open in Editor打开编辑器,添加前缀image,添加图片,在/前缀下添加文件main.qml、Cloud.qml,然后关闭res.qrc,选择保存,这时在项目的Resources下刚才添加的文件
6、在mainwindow.cpp中添加头文件:
#include <QtQml/QQmlContext>
#include <QtQuickWidgets/QQuickWidget>
7、在mainwindow.cpp中添加如下代码:
QWidget * mWidget = new QWidget();
mWidget->setStyleSheet("background-color: #00BFFF");
QGridLayout* mgrid = new QGridLayout;
mWidget->setLayout(mgrid);
QQuickWidget* viewer = new QQuickWidget();
viewer->rootContext()->setContextProperty("mwindow", this);
viewer->setSource(QUrl("qrc:/qml/Meteo/main.qml"));
viewer->setResizeMode(QQuickWid