QML笔记:QML基本概念及使用
- Qt5中的Qt Qml和Qt Quick架构
- Qt Qml模块本身并没有涉及图形显示,所有的图形处理都由Qt Quick模块完成。
- Qt Quick 以QPA(Qt Platform Abstraction)为基础,之上经过了Qt Gui、Open GL和Scene Graph这3层封装。
示例
- helloworld.pro: 项目文件.这个就是普通的Qt项目文件,其中指定程序使用的模块、源文件、资源文件等
- main.cpp: 其中包含了 main() 函数,用于加载QML文件
- qml.qrc: 资源文件,所有的QML文件、图片等都作为资源放在资源文件中
- main.cpp
#include <QGuiApplication> #include <QQmlApplicationEngine> int main(int argc, char *argv[]) { QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); QGuiApplication app(argc, argv); QQmlApplicationEngine engine; const QUrl url(QStringLiteral("qrc:/main.qml")); QObject::connect(&engine, &QQmlApplicationEngine::objectCreated, &app, [url](QObject *obj, const QUrl &objUrl) { if (!obj && url == objUrl) QCoreApplication::exit(-1); }, Qt::QueuedConnection); engine.load(url); return app.exec(); }
- 主函数实现的主要功能就是加载QMlL文件,这里使用了QQmlApplicationEngine对象来加载QML文件。
- 这个类提供了一种简易的方式,将一个QML文件加载到正在运行的程序中。
- 因为项目自动生成的所有QML文件被放到资源文件中,所以这里需要使用 qrc:/ 前缀从资源文件中进行加载。
创建 Qt Quick UI项目
- 有些时候可能只想测试QML相关内容,希望可以快速显示界面效果,这时可以创建 Qt Quick Ul项目。
- Qt QuickUl项目中只包含QML和JavaScript代码,没有添加任何C++代码。
- 选择“文件一新建文件或项目”菜单项,模板选择其他项目分类中的Qt Quick UI Prototype
- 代码:
- demo2.qmlproject
/* File generated by Qt Creator */ import QmlProject 1.1 Project { mainFile: "demo2.qml" /* Include .qml, .js, and image files from current directory and subdirectories */ QmlFiles { directory: "." } JavaScriptFiles { directory: "." } ImageFiles { directory: "." } /* List of plugin directories passed to QML runtime */ // importPaths: [ "../exampleplugin" ] }
- 这个demo2.qmlproject是项目文件,其中包含了项目配置信息。
- 主要指定了项目中所用的QML文件、JavaScript文件和图片文件所在的目录(默认为当前目录)。
- 指定以后,在代码中就可以直接使用该目录中的文件,不用再列出具体的路径。
- 按左下角运行按钮(或者使用Ctrl+R快捷键),程序会立即运行并显示界面。
- 查看下面的编译输出窗口和应用程序输出窗口,可以看到,项目并没有编译,而只是启动了qmlscene.exe工具。
- 在程序运行时并没有编译的过程,单独的QML文件并不需要进行编译就能够直接在qmlscene中进行预览。
- 在Qt Quick2中,QML文件的预览工具是QMLScene,使用它可以在开发应用时直接加载QML文件进行预览和测试,也可以在“工具→外部→QtQuick”中运行该工具。
Qt Quick 程序的发布
- 需要使用release方式编译程序,然后将生成的.exe可执行文件和需要的库文件放在一起打包进行发布。
windeploygt -qmldir release目录 目标文件目录