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.rhkb.cn/news/254443.html

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

相关文章

docker proxy 【docker 代理】

docker proxy 【docker 代理】

第一种 创建代理配置文件 mkdir -p /etc/systemd/system/docker.service.d/ cat <<EOF > /etc/systemd/system/docker.service.d/http-proxy.conf Environment"HTTP_PROXYhttp://192.168.21.101:7890" Environment"HTTPS_PROXYhttp://192.168.21.1…
阅读更多...
【原创 附源码】Flutter海外登录--Google登录最详细流程

【原创 附源码】Flutter海外登录--Google登录最详细流程

最近接触了几个海外登录的平台&#xff0c;踩了很多坑&#xff0c;也总结了很多东西&#xff0c;决定记录下来给路过的兄弟坐个参考&#xff0c;也留着以后留着回顾。更新时间为2024年2月8日&#xff0c;后续集成方式可能会有变动&#xff0c;所以目前的集成流程仅供参考&#…
阅读更多...
相机图像质量研究(9)常见问题总结：光学结构对成像的影响--工厂镜头组装

相机图像质量研究(9)常见问题总结：光学结构对成像的影响--工厂镜头组装

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结&#xff1a;光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结&#xff1a;光学结构对成…
阅读更多...
Cilium CNI深度指南

Cilium CNI深度指南

Cilium是基于eBPF的功能强大的CNI插件&#xff0c;为云原生环境提供了强大的网络和安全支持。原文: Cilium CNI: A Comprehensive Deep Dive Guide for Networking and Security Enthusiasts! &#x1f313;简介 欢迎阅读为网络和安全爱好者提供的全面深入的指南&#xff01; 本…
阅读更多...
Mac电脑如何通过终端隐藏应用程序？

Mac电脑如何通过终端隐藏应用程序？

在我们使用Mac电脑的时候难免会遇到想要不想看到某个应用程序又不想卸载它们。值得庆幸的是&#xff0c;macOS具有一些强大的文件管理功能&#xff0c;允许用户轻松隐藏&#xff08;以及稍后显示&#xff09;文件甚至应用程序。 那么&#xff0c;Mac电脑如何通过终端隐藏应用程…
阅读更多...
Unity3d Shader篇（五）— Phong片元高光反射着色器

Unity3d Shader篇（五）— Phong片元高光反射着色器

文章目录 前言一、Phong片元高光反射着色器是什么&#xff1f;1. Phong片元高光反射着色器的工作原理2. Phong片元高光反射着色器的优缺点优点缺点 二、使用步骤1. Shader 属性定义2. SubShader 设置3. 渲染 Pass4. 定义结构体和顶点着色器函数5. 片元着色器函数 三、效果四、总…
阅读更多...
Maven私服部署与JAR文件本地安装

Maven私服部署与JAR文件本地安装

Nexus3 是一个仓库管理器&#xff0c;它极大地简化了本地内部仓库的维护和外部仓库的访问。 平常我们在获取 maven 仓库资源的时候&#xff0c;都是从 maven 的官方&#xff08;或者国内的镜像&#xff09;获取。团队的多人员同样的依赖都要从远程获取一遍&#xff0c;从网络方…
阅读更多...
基于CNN卷积网络的MNIST手写数字识别matlab仿真,CNN编程实现不使用matlab工具箱

基于CNN卷积网络的MNIST手写数字识别matlab仿真,CNN编程实现不使用matlab工具箱

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 卷积神经网络&#xff08;CNN&#xff09; 4.2 损失函数和优化 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ......................…
阅读更多...
Linux学习笔记（centOS）—— 文件系统

Linux学习笔记（centOS）—— 文件系统

目录 一、Linux中的文件 打开方式 二、目录结构​ 三、相关命令 切换目录命令 列出当前目录下的文件和目录命令 一、Linux中的文件 “万物皆文件。” 图1.1 所有文件 打开方式 图形化界面左上角的位置→计算机&#xff0c;打开以后就可以看到Linux全部的文件了&#xf…
阅读更多...
Unity3d Shader篇（三）— 片元半兰伯特着色器解析

Unity3d Shader篇（三）— 片元半兰伯特着色器解析

文章目录 前言一、片元半兰伯特着色器是什么&#xff1f;1. 片元漫反射着色器的工作原理2. 片元半兰伯特着色器的优缺点优点&#xff1a;缺点&#xff1a; 3. 公式 二、使用步骤1. Shader 属性定义2. SubShader 设置3. 渲染 Pass4. 定义结构体和顶点着色器函数5. 片元着色器函数…
阅读更多...
浏览器F12调试

浏览器F12调试

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目…
阅读更多...
微信小程序（三十八）滚动容器

微信小程序（三十八）滚动容器

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.滚动触底事件 2.下拉刷新事件 源码&#xff1a; index.wxml <view class"Area"> <!-- scroll-y 垂直滚动refresher-enabled 允许刷新bindrefresherrefresh 绑定刷新作用函数bindscrollto…
阅读更多...
百家cms代审

百家cms代审

环境搭建 源码链接如下所示 https://gitee.com/openbaijia/baijiacms 安装至本地后 直接解压到phpstudy的www目录下即可 接下来去创建一个数据库用于存储CMS信息。&#xff08;在Mysql命令行中执行&#xff09; 接下来访问CMS&#xff0c;会默认跳转至安装界面 数据库名称和…
阅读更多...
C++算法之双指针、BFS和图论

C++算法之双指针、BFS和图论

一、双指针 1.AcWing 1238.日志统计 分析思路 前一区间和后一区间有大部分是存在重复的 我们要做的就是利用这部分 来缩短我们查询的时间 并且在使用双指针时要注意对所有的博客记录按时间从小到大先排好顺序 因为在有序的区间内才能使用双指针记录两个区间相差 相当于把一个…
阅读更多...
FPGA_工程_按键控制的基于Rom数码管显示

FPGA_工程_按键控制的基于Rom数码管显示

一 信号 框图&#xff1a; 其中 key_filter seg_595_dynamic均为已有模块&#xff0c;直接例化即可使用&#xff0c;rom_8*256模块&#xff0c;调用rom ip实现。Rom_ctrl模块需要重新编写。 波形图&#xff1a; 二 代码 module key_fliter #(parameter CNT_MAX 24d9_999_99…
阅读更多...
大数据分析|大数据分析的十大应用领域

大数据分析|大数据分析的十大应用领域

有许多技术可用于分析大数据。这项工作介绍了BDA适用的各种分析技术领域如下。 &#xff08;1&#xff09;社会分析 社交分析是实时数据分析中一个重要且不断发展的分析方法。它分为社交网络(例如&#xff0c;Facebook和LinkedIn)&#xff0c;博客(例如&#xff0c;Blogger和W…
阅读更多...
【51单片机】LCD1602(可视化液晶屏)调试工具的使用

【51单片机】LCD1602(可视化液晶屏)调试工具的使用

前言 大家好吖&#xff0c;欢迎来到 YY 滴 单片机系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过单片机的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY…
阅读更多...
AMH面板如何安装与公网远程访问本地面板界面

AMH面板如何安装与公网远程访问本地面板界面

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
使用C#读取PDF中所有文本内容

使用C#读取PDF中所有文本内容

先安装如下包 using iTextSharp.text.pdf; using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text;namespace ReadPdfText {class Program{static void Main(string[] args){string path "0017_审判流程管理信息表2…
阅读更多...
双非本科准备秋招（21.2）—— ReentrantLock

双非本科准备秋招（21.2）—— ReentrantLock

一、vs synchronized 可中断可以设置超时时间可以设置为公平锁支持多个条件变量 语法&#xff1a; // 获取锁reentrantLock.lock();try {// 临界区} finally {// 释放锁reentrantLock.unlock();} 二、可重入 连续三次上锁。 Slf4j(topic "c.test") public class…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发