Qt QML学习（一）：Qt Quick 与 QML 简介

参考引用

  • QML和Qt Quick快速入门
  • 全面认识 Qt Widgets、QML、Qt Quick

1. Qt Widgets、QML、Qt Quick 区别

1.1 QML 和 Qt Quick 是什么关系？

1.1.1 从概念上区分

  • QML 是一种用户界面规范和标记语言，它允许开发人员创建高性能、流畅的动画和具有视觉吸引力的应用程序

    • 用户界面规范：QML 提供一种高度可读的、声明式的、类似 JSON 的语法，支持命令式 JavaScript 表达式和动态属性绑定
    • 标记语言：像 C++ 一样，QML 也是一种语言，它的文件以 .qml 结尾

  • Qt Quick 是 QML 类型和功能的标准库，它包括视觉类型、交互类型、动画、模型和视图、粒子效果和着色效果（可以使用 import 语句访问所有这些功能）

    • Qt Quick 使用 QML 作为声明语言，来设计以用户界面为中心的应用程序
    • 严格来讲，Qt Quick 是一个用于 QML 的工具包，允许以 QML 语言来开发图形界面
1.1.2 从模块上区分
  • QML 由 Qt QML 模块提供，Qt Quick QML 库由 Qt Quick 模块提供
    • Qt QML 模块：为 QML 应用程序提供了语言和引擎基础结构
    • Qt Quick 模块：提供了许多可视化组件、模型视图支持、动画框架以及用于构建用户界面的更多功能

总之，GUI 模块是 Qt Quick，QML 是标记语言，它包含一个 JavaScript 运行时来执行 JavaScript，还可以将 QML/JavaScript 代码与 C++ 代码集成在一起

1.2 为什么要引入 QML/Qt Quick？

  • 既然有了 Qt Widgets，为什么还要引入 QML/Qt Quick 呢？
    • 战略性发展：Qt 想用 QML/Qt Quick 一统天下（桌面＋移动端），对界面要求较高的开发者来说作用尤为重要
    • 开发效率的提升：Web 技术让 JS 的解析速度更快，QML/Qt Quick 和 Node.js 类似，提供了一系列 JS 和 C++ 交互的接口，便于 JS 和 C++ 通信
    • UI 与逻辑分离：QML 应用开发适合使用 C++ 来进行扩展，以便在后台执行一些计算密集型任务（例如：复杂图像处理、物理引擎），而界面设计和一些简单逻辑（例如：按钮变色、换肤）都可以在 JS 中完成；使用 C++ 创建的数据可从 QML 直接访问，而 QML 对象也可从 C++ 代码进行访问

1.3 Qt Widgets 和 Qt Quick 有什么区别？

  • 语言编码

    • Qt Widgets 主要使用 C++ 代码（PyQt 和 PySide-Qt 的 Python 绑定，使用的是 Python）
    • Qt Quick 主要使用 QML 和 JavaScript

  • 性能差异

    • 与 Qt Quick 相比，Qt Widgets 更底层一些，但从长远角度来看，Qt Widgets 性能更好、运行得更快
    • 当然，处于底层是有好处的，这可以让 Qt Widgets 更多地暴露于本地的 API （QtCore 模块、Qt Style Sheets 等），也就是说，它常用于桌面开发；Qt Quick 更适合移动开发（尽管可用于桌面开发），它有随时可用的弹出窗口、动画、滑动、抽屉和常用控件，在移动开发中无处不在

  • UI 设计

    • 它们都可以与 Qt Designer 一起工作，并生成相应的 ui 文件（在 Qt Widgets 中，文件后缀是 .ui；而在 Qt Quick 中，文件后缀是 .ui.qml），为设置布局和创建接口提供了一个高级视图
    • ui 文件不是强制性的，也不是必需的，可以选择使用 C++/Python 或 QML/JS 以编程方式进行设计和布局

2. QML 和 Qt Quick 简介

  • Qt Quick 的界面流畅、动态，适合于触摸界面，而 Qt Widgets 用于创建复杂的桌面应用程序
  • Qt Widgets 使用 C++ 进行开发，Qt Quick 使用 QML 声明式语言来构建用户界面，并使用 JavaScript 来实现逻辑

2.1 QML

  • QML (Qt Meta-Object Language，Qt 元对象语言) 是一种用于描述应用程序用户界面的声明式编程语言，它使用一些可视组件以及这些组件之间的交互、关联来描述用户界面
    • QML 是一种高可读性的语言，可以使组件以动态方式进行交互，并且组件在用户界面中可以很容易地实现自定义和重复使用
    • Qt QML 模块为 QML 语言开发应用程序和库提供了一个框架，它定义并实现了语言及其引擎架构，并且提供了一个接口，允许应用开发者以自定义类型和集成 JavaScript、C++ 代码的方式来扩展 QML 语言

2.2 Qt Quick

  • Qt Quick 是 QML 类型和功能的标准库，包含了可视化类型、交互类型、动画、模型和视图、粒子特效和渲染特效等
    • 在 QML 应用程序中，可以通过一个简单的 import 语句来使用 Qt Quick 模块提供的所有功能
    • Qt QML 模块提供了 QML 的引擎和语言基础，而 Qt Quick 模块提供了 QML 创建用户界面所需的所有基本类型
    • 使用 Qt Quick 模块，可构建流畅的动态式 QML 用户界面，并且在需要时可将这些用户界面连接到任何 C++ 后端
    • Qt Quick 模块提供了两种接口
      • 使用 QML 语言创建用户界面的 QML 接口和使用 C++ 语言扩展 QML 的 C++ 接口

2.3 Qt Quick 和 Qt Widgets 用户界面对比

在这里插入图片描述

3. Qt Quick 应用

3.1 创建 Qt Quick 应用

3.1.1 代码结构

在这里插入图片描述

3.1.2 具体代码
  • main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>int main(int argc, char *argv[]) {QGuiApplication app(argc, argv);//    QQmlApplicationEngine engine;
//    const QUrl url(u"qrc:/helloworld/main.qml"_qs);
//    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
//                     &app, [url](QObject *obj, const QUrl &objUrl) {
//        if (!obj && url == objUrl)
//            QCoreApplication::exit(-1);
//    }, Qt::QueuedConnection);
//    engine.load(url);// 以上代码可以略写为QQmlApplicationEngine engine;engine.load(QUrl("qrc:/helloworld/main.qml"));  // 加载 QML 文件//如果不想使用资源文件，也可以使用本地相对路径//engine.load(QUrl::fromLocalFile("../helloworld/main.qml"));return app.exec();
}
  • helloworld.pro
QT += quickSOURCES += \main.cpp# 新添加的 QML 文件需要添加到资源文件中
# 此处新建的 MyText.qml 其实就是自定义一个 MyText 类型
# MyText.qml 与 main.qml 放在一起，这样在 main.qml 中可以直接使用 MyText 类型
resources.files += main.qml \MyText.qml
resources.prefix = /$${TARGET}
RESOURCES += resources \images.qrc# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH =# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += targetDISTFILES += \MyText.qmlRC_ICONS = icon.ico  # 窗口 logo，icon.ico 文件与 .pro 文件位于同级目录
  • main.qml
import QtQuickWindow {width: 640height: 480visible: true  // Window 默认不显示，此处需设置为 truetitle: qsTr("QML Test")Image {id: logosource: "qrc:/images/logo.png"anchors.centerIn: parent}MyText {anchors.top: logo.bottomanchors.horizontalCenter: logo.horizontalCenter}
}
  • MyText.qml
import QtQuickText {text: qsTr("欢迎关注我的CSDN博客")color: "green"
}
3.1.3 运行演示

在这里插入图片描述

3.2 Qt Quick 程序的发布

  • 1、首先以 release 方式进行编译，将生成的 helloworld.exe 文件复制到 D:\QMLApp 文件夹（自行创建）
  • 2、打开 Qt 命令行工具（如下图所示），并输入如下指令
    # D:\download\qml\helloworld 为项目所在路径
# D:\download\QMLApp 为欲发布打包的目录
windeployqt --qmldir D:\download\qml\helloworld D:\download\QMLApp

在这里插入图片描述

  • 3、进入 D:\QMLApp 目录，生成内容如下，此时双击 helloworld.exe 即可运行
    在这里插入图片描述

3.3 创建 Qt Quick UI 应用

  • 如果只想测试 QML 相关内容，希望可以快速显示界面效果，这时可以创建 Qt Quick UI 项目，该项目中只包含 QML 和 JavaScript 代码，没有添加任何 C++ 代码，对于 QML 文件，无须编译就可以直接在预览工具中显示界面效果

    项目并没有编译，只是启动了 qml.exe 工具，单独的 QML 文件不需要进行编译就能直接进行预览

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/676731.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

「数据结构」八大排序2：快排、归并排序

「数据结构」八大排序2：快排、归并排序

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;初阶数据结构 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 八大排序2 &#x1f349;快速排序&#x1f34c;霍尔版本&#x1f34c;挖坑法&#x1f34c;前后指针法 &#x1f349;快排优化&am…
阅读更多...
鸿蒙原生应用再添新丁！央视新闻 入局鸿蒙

鸿蒙原生应用再添新丁！央视新闻 入局鸿蒙

鸿蒙原生应用再添新丁&#xff01;央视新闻 入局鸿蒙 来自 HarmonyOS 微博2月9日消息&#xff0c;#央视新闻启动鸿蒙原生应用开发#中央广播电视总台旗舰央视新闻客户端正式宣布&#xff0c;将基于HarmonyOS NEXT鸿蒙星河版&#xff0c;启动央视新闻 鸿蒙原生应用开发&#xf…
阅读更多...
CSGO游戏搬砖项目靠谱吗？是不是骗人的

CSGO游戏搬砖项目靠谱吗？是不是骗人的

很多地方都在大肆宣扬说CSGO游戏搬砖项目有二三十个点的利润&#xff0c;但我觉得他们看待问题太片面了&#xff0c;没有从全局上去分析这个项目。 这些人为了能割到小白的韭菜真是无所不用其极&#xff0c;什么牛都能吹得出来&#xff01;至少要实事求是吧&#xff0c;这不睁…
阅读更多...
Ajax+JSON学习一

Ajax+JSON学习一

AjaxJSON学习一 文章目录 前言一、Ajax简介1.1. Ajax基础1.2. 同源策略 二、Ajax的核心技术2.1. XMLHttpRequest 类2.2. open指定请求2.3. setRequestHeader 设置请求头2.4. send发送请求主体2.5. Ajax取得响应 总结 前言 一、Ajax简介 1.1. Ajax基础 Ajax 的全称是 Asynchron…
阅读更多...
vue3 之 商城项目—详情页

vue3 之 商城项目—详情页

整体认识 路由配置 准备组件模版 <script setup></script><template><div class"xtx-goods-page"><div class"container"><div class"bread-container"><el-breadcrumb separator">">&…
阅读更多...
面向工业 X.0 的工业网络简述

面向工业 X.0 的工业网络简述

此图片来源于网络 1、背景 工业4.0是在21世纪初提出的&#xff0c;特别是在2013年&#xff0c;德国政府正式推出了“工业4.0”战略&#xff0c;旨在通过利用物联网&#xff08;IoT&#xff09;等先进技术提高工业的竞争力。因此&#xff0c;我们可以认为工业4.0的实现时间大致…
阅读更多...
安卓服务的常见问题，性能优化以及应用场景剖析

安卓服务的常见问题，性能优化以及应用场景剖析

一、引言 在安卓开发中&#xff0c;服务&#xff08;Service&#xff09;扮演着至关重要的角色&#xff0c;它们在没有用户界面的情况下&#xff0c;为用户提供了长时间的后台任务执行能力。本文将探讨服务常见问题、优化策略、应用场景以及开发过程中应注意的事项。 二、应用场…
阅读更多...
自己动手打包element UI官方手册文档教程

自己动手打包element UI官方手册文档教程

经常用element ui朋友开发的比较郁闷&#xff0c;官方文档网基本上都是打不开的&#xff0c; 官方&#xff1a;https://element.eleme.io/ 一直打不开&#xff0c;分析下是里面用的cdn链接ssl证书无效。 就想着自己搭建一个element UI文档 自己搭建的&#xff1a; Element文档网…
阅读更多...
blender几何节点中样条线参数中的系数（factor）是个什么概念？

blender几何节点中样条线参数中的系数（factor）是个什么概念？

一根样条线&#xff0c;通常由两个及以上的控制点构成。 每个控制点的系数&#xff0c;其实相当于该点处位于整个样条线的比值。 如图&#xff0c;一根样条线有十一个控制点。相当于把它分成了十段&#xff0c;那每一段可以看到x、y都是0&#xff0c;唯独z每次增加0.1&#xff…
阅读更多...
【物联网】继续深入探索ADC模拟转数字的原理——Flash ADC流水线ADC逐次逼近型SAR ADC

【物联网】继续深入探索ADC模拟转数字的原理——Flash ADC流水线ADC逐次逼近型SAR ADC

这篇文章主要弥补上一篇关于ADC的不足&#xff0c;更加深入了解ADC数模转换器的工作原理&#xff0c;举例常见的三种ADC&#xff0c;分别为Flash ADC&流水线ADC&逐次逼近型SAR ADC。 【物联网】深入了解AD/DA转换技术&#xff1a;模数转换和数模转换 前些天发现了一个巨…
阅读更多...
“智能检测，精准把控。温湿度检测系统，为您的生活带来全方位的健康保障。”#非标协议项目【上】

“智能检测，精准把控。温湿度检测系统，为您的生活带来全方位的健康保障。”#非标协议项目【上】

“智能检测&#xff0c;精准把控。温湿度检测系统&#xff0c;为您的生活带来全方位的健康保障。”#非标协议项目【上】 前言预备知识1温湿度检测系统需求2.代码整合2.1找到编程实现LCD1602显示一行工程&#xff0c;打开代码文件&#xff0c;将所需的LCD1602驱动代码拷贝到温湿…
阅读更多...
GEE数据——美国农业部LANDFIRE (LF)数据集2.3.0版本

GEE数据——美国农业部LANDFIRE (LF)数据集2.3.0版本

地面火灾数据集 LANDFIRE (LF)&#xff0c;即 "地貌火灾和资源管理规划工具"&#xff0c;是美国农业部森林服务局、美国内政部地质调查局和大自然保护协会的野地火灾管理项目之间的共享项目。前言 – 人工智能教程 LANDFIRE (LF) 图层是利用基于大量实地参考数据、…
阅读更多...
2.8日学习打卡----初学RabbitMQ（三）

2.8日学习打卡----初学RabbitMQ（三）

2.8日学习打卡 一.springboot整合RabbitMQ 之前我们使用原生JAVA操作RabbitMQ较为繁琐&#xff0c;接下来我们使用 SpringBoot整合RabbitMQ&#xff0c;简化代码编写 创建SpringBoot项目&#xff0c;引入RabbitMQ起步依赖 <!-- RabbitMQ起步依赖 --> <dependency&g…
阅读更多...
二、OpenAI开发者快速入门

二、OpenAI开发者快速入门

启动并运行OpenAI API OpenAI API 为开发者提供一个简单的接口&#xff0c;使其能够在他们的应用中创建一个智能层&#xff0c;由OpenAI最先进的模型提供支持。聊天补全端点为ChatGPT提示支持&#xff0c;一种简单的方法是&#xff1a;输入文本&#xff0c;使用GPT-4模型输出。…
阅读更多...
Swift Combine 使用 sink, assign 创建一个订阅者 从入门到精通九

Swift Combine 使用 sink, assign 创建一个订阅者 从入门到精通九

Combine 系列 Swift Combine 从入门到精通一Swift Combine 发布者订阅者操作者 从入门到精通二Swift Combine 管道 从入门到精通三Swift Combine 发布者publisher的生命周期 从入门到精通四Swift Combine 操作符operations和Subjects发布者的生命周期 从入门到精通五Swift Com…
阅读更多...
项目02《游戏-12-开发》Unity3D

项目02《游戏-12-开发》Unity3D

基于 项目02《游戏-11-开发》Unity3D &#xff0c; 任务&#xff1a;实现场景怪物自动巡航 &#xff0c; 首先在场景中创建小球命名为路径点WayPoint0&#xff0c; 取消小球的碰撞器Collider&#xff0c; 再复制两个改名为WayPoint1 和 WayPoint2 &#xff0c; 在…
阅读更多...
Android矩阵Matrix动画缩放Bitmap移动手指触点到ImageView中心位置，Kotlin

Android矩阵Matrix动画缩放Bitmap移动手指触点到ImageView中心位置，Kotlin

Android矩阵Matrix动画缩放Bitmap移动手指触点到ImageView中心位置&#xff0c;Kotlin 借鉴 Android双指缩放ScaleGestureDetector检测放大因子大图移动到双指中心点ImageView区域中心&#xff0c;Kotlin&#xff08;2&#xff09;-CSDN博客 在此基础上实现手指在屏幕上点击后&…
阅读更多...
微服务OAuth 2.1扩展额外信息到JWT并解析(Spring Security 6)

微服务OAuth 2.1扩展额外信息到JWT并解析(Spring Security 6)

文章目录 一、简介二、重写UserDetailsService三、Controller解析JWT获取用户信息四、后记 一、简介 VersionJava17SpringCloud2023.0.0SpringBoot3.2.1Spring Authorization Server1.2.1Spring Security6.2.1mysql8.2.0 Spring Authorization Server 使用JWT时&#xff0c;前…
阅读更多...
生成式人工智能攻击的一年：2024

生成式人工智能攻击的一年：2024

趋势科技最近公布了其关于预期最危险威胁的年度研究数据。生成人工智能的广泛可用性和质量将是网络钓鱼攻击和策略发生巨大变化的主要原因。 趋势科技宣布推出“关键可扩展性”&#xff0c;这是著名年度研究的新版本&#xff0c;该研究分析了安全形势并提出了全年将肆虐的网络…
阅读更多...
用EXCEL从地址(上海)中提取各区(浦东新区等区)信息

用EXCEL从地址(上海)中提取各区(浦东新区等区)信息

背景&#xff1a; 朋友工作需要经常用EXCEL把各上海用户收货地址中的区提取出来&#xff0c;之前一直手动处理&#xff0c;希望我帮忙用EXCEL公式直接提取处理。 数据样式&#xff1a; 中国上海市浦东新区A小区 上海徐汇区B小区 中国&#xff0c;上海&#xff0c;浦东新区&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023