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://xiahunao.cn/news/2776611.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

LiteFlow规则引擎框架

LiteFlow规则引擎框架

LiteFlow规则引擎框架 Hi&#xff0c;我是阿昌&#xff0c;今天介绍一个规则引擎框架&#xff0c;LiteFlow&#xff1b; 一、前言 那首先得知道什么是规则引擎&#xff1f;规则引擎是 一种用于自动化处理业务规则的软件组件。 在软件行业中&#xff0c;规则引擎通常用于解决…
阅读更多...
【Java IO】同步异步和阻塞非阻塞真正的区别！！！

【Java IO】同步异步和阻塞非阻塞真正的区别！！！

先上结论&#xff1a; 同步异步和阻塞非阻塞真正的区别&#xff01;&#xff01;&#xff01; 假设某个进程正在运行下面这段代码&#xff1a; ...... operatorA......; read(); operatorB......; operatorC......;当进程执行完operatorA后开始进行read系统调用&#xff0c;…
阅读更多...
JSP页面组件

JSP页面组件

JSP页面组件 JSP页面由各种组件组成，可以在JSP应用程序中使用这些组件来添加其他功能，如添加添加和循环结构或使用JavaBean组件。JSP页面的四个组件为： JSP指令JSP脚本JSP隐式对象JSP动作1. JSP指令 JSP页面中的指令元素提供关于特定JSP页面的全局信息，有三种类型： Page…
阅读更多...
你是在独立思考，还是在被洗脑？

你是在独立思考，还是在被洗脑？

你有过这样的经历吗&#xff1f; 老板走过来&#xff0c;急匆匆丢给你一句&#xff1a;帮我整理一下那个客户的资料&#xff0c;下午给我。你抬头&#xff0c;应道「好好好」。老板扬长而去。你转念一想&#xff1a; 等等&#xff0c;哪个客户&#xff1f;什么资料&#xff1f;…
阅读更多...
发文新思路！双流卷积！CWT-DSCNN-MSA基于时序特征、cwt小波时频图的双流卷积融合注意力机制的故障识别程序！直接运行！

发文新思路！双流卷积！CWT-DSCNN-MSA基于时序特征、cwt小波时频图的双流卷积融合注意力机制的故障识别程序！直接运行！

适用平台&#xff1a;Matlab2023版本及以上 本程序参考中文EI期刊《电力自动化设备》2023年12月29号网络首发文献&#xff1a;《基于格拉姆角场与并行CNN的并网逆变器开关管健康诊断》,此外&#xff0c;在此基础上进一步对模型进行多重改进&#xff0c;每个人都可以构造属于自…
阅读更多...
你的立身之本是什么？

你的立身之本是什么？

去年发生的一切&#xff0c;大到疫情、政治经济形势、行业的萎靡和震荡&#xff0c;小到身边的跳槽、裁员、公司倒闭……似乎都在告诉我们&#xff1a; 当冲击到来的时候&#xff0c;它是不会提前跟你打招呼的。 接下来的10年&#xff0c;我们所面临的不确定性&#xff0c;比起…
阅读更多...
绝缘栅极晶体管IGBT

绝缘栅极晶体管IGBT

IGBT&#xff08;绝缘栅极晶体管&#xff09;: 常用于百V百A级使用&#xff0c;外观上看相比于MOS最大的区别是比较大&#xff0c;mos主要用于中小功率器件中。 本质是一个电子开关&#xff0c;相比于MOS和三极管来说其最大的特点是耐压很高&#xff0c;可达6000V以上&#xf…
阅读更多...
保育员答案在哪搜？这4款足够解决问题 #媒体#其他#其他

保育员答案在哪搜？这4款足够解决问题 #媒体#其他#其他

学会运用各类学习辅助工具和资料&#xff0c;是大学生培养自主学习能力和信息获取能力的重要途径之一。 1.石墨文档 石墨文档(Shimo Docs)是一款强大的在线文档协作工具。它提供了多人实时协作、版本控制、评论和批注等功能&#xff0c;方便学生在学习中进行文档编写、合作项…
阅读更多...
VUE学习——事件处理

VUE学习——事件处理

事件分为内联事件和方法事件。 我们可以使用【v-on】&#xff08;简写&#xff1a;&#xff09;来处理。 内联 <button v-on:click"count">按钮</button><button click"count">按钮</button><p>{{ count }}</p>方法
阅读更多...
ClickHouse--01--简介

ClickHouse--01--简介

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1. ClickHouse 简介1.1 大数据处理场景1.2 什么是 ClickHouse1.3 OLAP 场景的特征 2. ClickHouse 特性2.1 完备的 DBMS 功能2.2 列式存储行式存储: 在数据写入和修改…
阅读更多...
Linux线程库封装

Linux线程库封装

一 MyThread.hpp #pragma once #include<pthread.h> #include<iostream> #include<unistd.h> #include<string> #include<ctime>typedef void (*callback_t)(); static int num 1; //任务和线程绑定 class Thread {static void* Routine(void …
阅读更多...
容器监控三剑客CAdvisor、Granfana、InfluxDB

容器监控三剑客CAdvisor、Granfana、InfluxDB

容器监控 原生命令 docker stats查看结果 &#x1f629;通过docker stats命令可以很方便的看到当前宿主机上所有容器的CPU,内存以及网络流量等数据&#xff0c;一般小公司够用了。但是&#xff0c;docker stats统计结果只能是当前宿主机的全部容器&#xff0c;数据资料是实…
阅读更多...
【OrangePi Zero2的系统移植】交叉编译工具链配置、wiringOP库、智能分类工程代码

【OrangePi Zero2的系统移植】交叉编译工具链配置、wiringOP库、智能分类工程代码

一、交叉编译工具链配置 二、交叉编译wiringOP库 三、交叉编译智能分类工程代码 四、Makefile 用于编译 WiringPi 库 一、交叉编译工具链配置 1、关于编译 编译是指将源代码文件&#xff08;如C/C文件&#xff09;经过预处理、编译、汇编和链接等步骤&#xff0c;转换为可执…
阅读更多...
第5章 数据库操作

第5章 数据库操作

学习目标 了解数据库&#xff0c;能够说出数据库的概念、特点和分类 熟悉Flask-SQLAlchemy的安装&#xff0c;能够在Flask程序中独立安装扩展包Flask-SQLAlchemy 掌握数据库的连接方式&#xff0c;能够通过设置配置项SQLALCHEMY_DATABASE_URI的方式连接数据库 掌握模型的定义…
阅读更多...
推荐研发度量思码逸的研发度量工具及视频教学

推荐研发度量思码逸的研发度量工具及视频教学

目前国内做研发度量中&#xff0c;思码逸的研发度量工具的确做的不错&#xff0c;网址是&#xff1a;思码逸-专业的软件研发效能度量分析平台 看到一个不错的介绍视频&#xff1a;《让数据说话&#xff0c;高效盘点企业研发效能》&#xff0c; 地址是&#xff1a;视频课程&…
阅读更多...
VMware17上安装centos7.9成功后，进入linux命令行以后，运行没几分钟直接卡死，或者说非常卡

VMware17上安装centos7.9成功后，进入linux命令行以后，运行没几分钟直接卡死，或者说非常卡

VMware17上安装centos7.9成功后&#xff0c;进入linux命令行以后&#xff0c;运行没几分钟直接卡死&#xff0c;或者说非常卡 解决方案&#xff1a;关闭windows的Hyper-V服务&#xff0c;重启虚拟机
阅读更多...
高防服务器出租的优势及特点

高防服务器出租的优势及特点

高防服务器出租是指租用具备高防御能力的服务器&#xff0c;用于应对网络攻击、保护网站和数据安全。那么为什么会选择高防服务器出租&#xff0c;小编为您整理发布高防服务器出租的优势及特点。 高防服务器通常具备以下特点&#xff1a; 1. 高性能硬件配置&#xff1a;高防服务…
阅读更多...
面试经典150题 -- 栈(总结)

面试经典150题 -- 栈(总结)

总的链接 面试经典 150 题 - 学习计划 - 力扣&#xff08;LeetCode&#xff09;全球极客挚爱的技术成长平台 关于栈 -- stack 的学习链接 c的STL中的栈 -- stack-CSDN博客 20 . 有效的括号 这题直接用栈模拟就好了; 这里用一种取巧的方法 , 当遇见左括号&#xff0c;加入右…
阅读更多...
以管理员权限删除某文件夹

以管理员权限删除某文件夹

到开始菜单中找到—命令提示符—右击以管理员运行 使用&#xff1a;del /f /s /q “文件夹位置” 例&#xff1a;del /f /s /q "C:\Program Files (x86)\my_code\.git"
阅读更多...
HARRYPOTTER: FAWKES

HARRYPOTTER: FAWKES

攻击机 192.168.223.128 目标机192.168.223.143 主机发现 nmap -sP 192.168.223.0/24 端口扫描 nmap -sV -p- -A 192.168.223.143 开启了21 22 80 2222 9898 五个端口&#xff0c;其中21端口可以匿名FTP登录&#xff0c;好像有点说法,百度搜索一下发现可以用anonymous登录…
阅读更多...
最新文章

Copyright @ 2022~2023