1、Qt6 Quick 简介

一、Qt6 Quick 简介

1、Qt Quick简介

Qt Quick 是 Qt 6 中使用的用户界面技术的总称。它是在 Qt 4 中引入的，现在在 Qt 6 中进行了扩展。Qt Quick 本身是几种技术的集合：

  • QML——用户界面标记语言
  • JavaScript - 动态脚本语言
  • Qt C++ - 高度可移植的增强型 C++ 库
    在这里插入图片描述
    与 HTML 类似，QML 是一种标记语言。它由 Qt Quick 中称为类型的标签组成，标签括在花括号中：Item {}。它从一开始就被设计用于创建用户界面、提高速度并让开发人员更轻松地阅读。可以使用 JavaScript 代码进一步增强用户界面。Qt Quick 可以使用 Qt C++ 轻松扩展您自己的本机功能。简而言之，声明性 UI 称为前端，本机部分称为后端。这使您可以将应用程序的计算密集型和本机操作与用户界面部分分开。

在典型的项目中，前端是用 QML/JavaScript 开发的。后端代码（与系统交互并完成繁重工作）是使用 Qt C++ 开发的。这样可以自然地将更注重设计的开发人员和功能开发人员区分开来。通常，后端使用 Qt Test（Qt 单元测试框架）进行测试，并导出供前端开发人员使用。

2、QML 和 Qt Quick 是什么关系？

①从概念上区分

  • QML 是一种用户界面规范和标记语言，它允许开发人员创建高性能、流畅的动画和具有视觉吸引力的应用程序
    • 用户界面规范：QML 提供一种高度可读的、声明式的、类似 JSON 的语法，支持命令式 JavaScript 表达式和动态属性绑定
    • 标记语言：像 C++ 一样，QML 也是一种语言，它的文件以 .qml 结尾

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

  • Qt Quick 使用 QML 作为声明语言，来设计以用户界面为中心的应用程序
  • 严格来讲，Qt Quick 是一个用于 QML 的工具包，允许以 QML 语言来开发图形界面

②从模块上区分

  • QML 由 Qt QML 模块提供，Qt Quick QML 库由 Qt Quick 模块提供
    • Qt QML 模块：为 QML 应用程序提供了语言和引擎基础结构
    • Qt Quick 模块：提供了许多可视化组件、模型视图支持、动画框架以及用于构建用户界面的更多功能。

③为什么要引入 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++ 代码进行访问

④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 以编程方式进行设计和布局

二、 Qt Quick 应用

1、创建 Qt Quick 应用

项目名称：Qt6_1_Base_1
在这里插入图片描述
输入项目名称，选择项目存储路径：
在这里插入图片描述
选择Qt最小版本：
在这里插入图片描述
选择构建套件，这里我们选择MinGW 64位进行编译：
在这里插入图片描述
选择版本管理，这里我们不做选择：
在这里插入图片描述

2、代码结构

在这里插入图片描述
①CMakeLists.txt 构建配文件
②C++代码文件，启动入口。
③Main.qml，也就是我们所有编写的UI文件。

3、代码解读

main.cpp

#include <QGuiApplication>  // 引入 QGuiApplication 类，用于创建和管理应用程序的 GUI 环境
#include <QQmlApplicationEngine>  // 引入 QQmlApplicationEngine 类，用于加载和运行 QML 文件int main(int argc, char *argv[])
{// 设置环境变量 QT_IM_MODULE 为 "qtvirtualkeyboard"，启用虚拟键盘输入法qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard"));// 创建 QGuiApplication 对象，初始化应用程序QGuiApplication app(argc, argv);// 创建 QQmlApplicationEngine 对象，用于加载和运行 QML 文件QQmlApplicationEngine engine;// 连接 QML 引擎的 objectCreationFailed 信号到一个槽函数，当 QML 对象创建失败时退出应用程序QObject::connect(&engine,&QQmlApplicationEngine::objectCreationFailed,&app,[]() { QCoreApplication::exit(-1); },  // 使用 lambda 表达式定义槽函数，退出应用程序并返回 -1Qt::QueuedConnection);  // 使用异步连接方式// 加载 QML 模块中的主文件，这里的路径是 "Qt6_1_Base_1/Main.qml"engine.loadFromModule("Qt6_1_Base_1", "Main");// 进入应用程序的主事件循环，等待用户操作return app.exec();
}

Main.qml

import QtQuick  // 导入 QtQuick 模块，用于创建基本的 QML 组件
import QtQuick.VirtualKeyboard  // 导入 QtQuick.VirtualKeyboard 模块，用于启用虚拟键盘Window {  // 创建一个主窗口id: window  // 设置窗口的唯一标识符width: 640  // 设置窗口的宽度为 640 像素height: 480  // 设置窗口的高度为 480 像素visible: true  // 设置窗口初始状态为可见title: qsTr("Hello World")  // 设置窗口标题为 "Hello World"InputPanel {  // 创建一个虚拟键盘面板id: inputPanel  // 设置虚拟键盘面板的唯一标识符z: 99  // 设置 z 值为 99，确保虚拟键盘在其他组件之上显示x: 0  // 设置虚拟键盘的 x 坐标为 0y: window.height  // 设置虚拟键盘的初始 y 坐标为窗口高度，使其位于窗口底部外侧width: window.width  // 设置虚拟键盘的宽度与窗口宽度相同states: State {  // 定义虚拟键盘的状态name: "visible"  // 状态名称为 "visible"when: inputPanel.active  // 当虚拟键盘激活时，进入此状态PropertyChanges {  // 在进入 "visible" 状态时，更改虚拟键盘的属性target: inputPanel  // 目标对象为虚拟键盘面板y: window.height - inputPanel.height  // 将虚拟键盘的 y 坐标设置为窗口高度减去虚拟键盘高度}}transitions: Transition {  // 定义虚拟键盘的状态转换动画from: ""  // 转换的起始状态为空字符串，表示从任何状态开始to: "visible"  // 转换的目标状态为 "visible"reversible: true  // 设置动画可逆，即状态切换时动画可以反向播放ParallelAnimation {  // 并行动画，同时执行多个动画效果NumberAnimation {  // 数值动画，用于平滑改变 y 坐标的值properties: "y"  // 动画属性为 y 坐标duration: 250  // 动画持续时间为 250 毫秒easing.type: Easing.InOutQuad  // 使用 InOutQuad 缓动类型，使动画更加平滑}}}}
}

4、编译运行

在这里插入图片描述

5、运行结果

在这里插入图片描述
一个HelloWorld界面运行成功了。

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

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

相关文章

element-plus按需引入报错Components is not a function

element-plus按需引入报错Components is not a function

官网文档&#xff1a;快速开始 | Element Plus webpack配置 // webpack.config.js const AutoImport require(unplugin-auto-import/webpack) const Components require(unplugin-vue-components/webpack) const { ElementPlusResolver } require(unplugin-vue-components…
阅读更多...
【AIGC】如何通过ChatGPT轻松制作个性化GPTs应用

【AIGC】如何通过ChatGPT轻松制作个性化GPTs应用

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | GPTs应用实例 文章目录 &#x1f4af;前言&#x1f4af;什么是GPTsGPTs的工作原理GPTs的优势GPTs的应用前景总结 &#x1f4af;创建GPTS应用的基本流程进入GPTs创建界面方式一&#xff1a;按照引导完成生成创建GPTs方式二…
阅读更多...
uniapp配置消息推送unipush 厂商推送设置配置 FCM 教程

uniapp配置消息推送unipush 厂商推送设置配置 FCM 教程

说真的&#xff0c;这个 密钥文件 和 google-services.json 太难找了 现在 Firebase 已经不允许注册Cloud Messaging API (旧版)的密钥&#xff0c;所以下面这个官方的文档教程并不适用,但是大致位置可以参考 UniPush支持谷歌推送FCM配置指南 - DCloud问答 密钥文件 通过这里…
阅读更多...
51单片机数字电子钟proteus仿真（数电课设，含时间显示、校准、整点报时、闹钟功能）

51单片机数字电子钟proteus仿真（数电课设，含时间显示、校准、整点报时、闹钟功能）

51单片机数字电子钟proteus仿真 由于学校实验课要求完成51单片机数字电子钟proteus仿真的实验&#xff0c;下面是经过一段时间的努力完成的学习成果。希望分享给有需要的人。 功能描述&#xff1a; 显示功能&#xff1a;可以显示时、分、秒&#xff08;基于1602液晶显示屏&…
阅读更多...
Java8 新特性 —— Optional API 详解

Java8 新特性 —— Optional API 详解

本文涉及到的知识点有Lambda表达式&#xff0c;函数式接口以及Stream API&#xff0c;有不了解的小伙伴可以先学习前两篇文章&#xff1a; Java8 新特性 —— Lambda 表达式、函数接口以及方法引用详解 Java8 新特性 —— Stream API 详解 前言 Optional类是Java8新引进的一个…
阅读更多...
深入理解Python设计模式：工厂模式实践与应用

深入理解Python设计模式：工厂模式实践与应用

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storm…
阅读更多...
Windows系统安装部署C++基础开发环境

Windows系统安装部署C++基础开发环境

目录 前言安装MinGW-w64安装VSCode安装CMake完成 前言 这篇文章讨论一下Windows系统怎么安装部署C基础开发环境&#xff0c;你或许在想这还不简单吗&#xff0c;安装vs不就可以了吗&#xff0c;很对&#xff0c;可以在官网下载vs集成开发环境然后进行安装&#xff0c;这也是非…
阅读更多...
Cisco ACI Leaf交换机导出show tech

Cisco ACI Leaf交换机导出show tech

cisco.com 文档描述操作如下&#xff1a; https://www.cisco.com/c/en/us/support/docs/cloud-systems-management/application-policy-infrastructure-controller-apic/214520-guide-to-collect-tech-support-and-tac-re.html#toc-hId–2125674131 Trigger via Switch CLI O…
阅读更多...
基于matlab的人眼开度识别

基于matlab的人眼开度识别

我国已经成为世界汽车生产和制造大国&#xff0c;道路车辆的不断增加道路基础设施不断增强&#xff0c;但是随之而来的问题也日益严重&#xff0c;比如交通事故&#xff0c;噪声大气污染等。汽车行驶的安全性由于关乎人民生命安全&#xff0c;所以日益受到各国政府以及研究机构…
阅读更多...
使用 Spring Boot 搭建 WebSocket 服务器实现多客户端连接

使用 Spring Boot 搭建 WebSocket 服务器实现多客户端连接

在 Web 开发中&#xff0c;WebSocket 为客户端和服务端之间提供了实时双向通信的能力。本篇博客介绍如何使用 Spring Boot 快速搭建一个 WebSocket 服务器&#xff0c;并支持多客户端的连接和消息广播。 1. WebSocket 简介 WebSocket 是 HTML5 的一种协议&#xff0c;提供了客…
阅读更多...
详细分析Java8中的Duration时间类基本知识（附Demo）

详细分析Java8中的Duration时间类基本知识（附Demo）

目录 前言1. 基本知识2. Demo3. 拓展Demo 前言 基本的Java知识推荐阅读&#xff1a; java框架 零基础从入门到精通的学习路线 附开源项目面经等&#xff08;超全&#xff09;【Java项目】实战CRUD的功能整理&#xff08;持续更新&#xff09; 1. 基本知识 Duration 类是 Ja…
阅读更多...
Day14买卖股票的最佳时机

Day14买卖股票的最佳时机

给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从这笔交易中获取的最大利润。如…
阅读更多...
【星闪EBM-H63开发板】小熊派的开发板实物

【星闪EBM-H63开发板】小熊派的开发板实物

前几天介绍了&#xff0c;我参加了小熊派的星闪EBM-H63开发板内测活动。今天去快递站取回来开发板&#xff0c;让我们看看实物照片。 下面是开发板的正面照片&#xff0c;绿色的部分是核心板&#xff0c;蓝色的部分实际上是个底板&#xff0c;引出了串口的管脚&#xff0c;再加…
阅读更多...
zookeeper的选举机制

zookeeper的选举机制

zk中有两种角色&#xff1a;Leader 和 Fllower Leader是自己的集群各台电脑投票选举出来的。 事务&#xff1a;一通操作&#xff0c;要么同时成立&#xff0c;要么都不成立。 举例&#xff1a;Jack 和 Rose Rose 给 Jack&#xff08;小李子&#xff09; 转钱 Rose -100 J…
阅读更多...
六：java 基础知识（6）-- Maven项目管理

六：java 基础知识（6）-- Maven项目管理

目录 1. 引言 1.1 什么是 Maven 1.2 Maven 的优势 2. Maven 基础 2.1 Maven 的基本概念 2.2 Maven 的工作原理 2.3 Maven 的安装与配置 3. Maven 项目结构 3.1 Maven 项目的标准目录结构 3.2 POM 文件&#xff08;pom.xml&#xff09;概述 3.3 POM 文件的基本配置 4…
阅读更多...
Centrifuge 5425R - 微量离心机技术数据详情——艾本德

Centrifuge 5425R - 微量离心机技术数据详情——艾本德

离心机&#xff0c;作为实验室中的关键设备&#xff0c;扮演着分离、浓缩和纯化样品的重要角色。而在众多离心机型号中&#xff0c;Centrifuge 5425R 以其出色的性能和多功能性&#xff0c;成为了众多科研人员的首选。下面&#xff0c;我们就来详细了解一下这款微量离心机的技术…
阅读更多...
【06】A-Maven项目SVN设置忽略文件

【06】A-Maven项目SVN设置忽略文件

做Web项目开发时&#xff0c;运用的是Maven管理工具对项目进行管理&#xff0c;在项目构建的过程中自动生成了很多不需要SVN进行管理的文件&#xff0c;SVN在对源码进行版本管理时&#xff0c;需要将其忽略&#xff0c;本文给出了具体解决方案。 SVN设置忽略Maven项目中自动生成…
阅读更多...
TDengine 签约蘑菇物联，改造通用设备工业互联网平台

TDengine 签约蘑菇物联，改造通用设备工业互联网平台

在当前工业互联网迅猛发展的背景下&#xff0c;企业面临着日益增长的数据处理需求和智能化转型的挑战。通用工业设备的高能耗问题愈发突出&#xff0c;尤其是由这些设备组成的公辅能源车间&#xff0c;亟需更高效的解决方案来提升设备运行效率&#xff0c;降低能源消耗。为此&a…
阅读更多...
革新汽车装配产线：MR30分布式IO模块引领智能制造新时代

革新汽车装配产线：MR30分布式IO模块引领智能制造新时代

在日新月异的汽车制造行业中&#xff0c;每一分每一秒的效率提升都意味着成本的降低与市场竞争力的增强。随着工业4.0时代的到来&#xff0c;智能化、自动化已成为汽车产线升级转型的关键词。在这场技术革命的浪潮中&#xff0c;MR30分布式IO模块以其高效、灵活、可靠的特点&am…
阅读更多...
Qt第三课 ----------容器类控件

Qt第三课 ----------容器类控件

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; ​&#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382; &#x1f389;&#x1f389;&#x1f389…
阅读更多...
最新文章

Copyright @ 2022~2023