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 表达式定义槽函数,退出应用程序并返回 -1
        Qt::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 坐标为 0
        y: 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界面运行成功了。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【HarmonyOS NEXT】在 HarmonyOS NEXT 中实现优雅的加载动画

【HarmonyOS NEXT】在 HarmonyOS NEXT 中实现优雅的加载动画 在移动应用开发中&#xff0c;加载动画是提升用户体验的重要工具。在应用程序处理数据或加载页面时&#xff0c;为用户提供视觉反馈尤为关键。在这篇博客中&#xff0c;我们将探讨如何在 HarmonyOS NEXT 中使用 Sta…

2024年10月30日(双指针算法)

一.和为s的两个数字&#xff1a; 1.题目描述&#xff1a; 这个题目就是找出两个数&#xff0c;这两个数的和是目标值&#xff0c;找到其中一对就可以返回了。 2.算法原理&#xff1a; 方法一&#xff1a; 暴力枚举的策略&#xff1a; 就是两层for循环&#xff0c;固定一个数&…

PyQt5实战——UTF-8编码器UI页面设计以及按钮连接(五)

个人博客&#xff1a;苏三有春的博客 系类往期文章&#xff1a; PyQt5实战——多脚本集合包&#xff0c;前言与环境配置&#xff08;一&#xff09; PyQt5实战——多脚本集合包&#xff0c;UI以及工程布局&#xff08;二&#xff09; PyQt5实战——多脚本集合包&#xff0c;程序…

【网络面试篇】HTTP(2)(笔记)——http、https、http1.1、http2.0

目录 一、相关面试题 1. HTTP 与 HTTPS 有哪些区别&#xff1f; 2. HTTPS 的工作原理&#xff1f;&#xff08;https 是怎么建立连接的&#xff09; &#xff08;1&#xff09;ClientHello &#xff08;2&#xff09;SeverHello &#xff08;3&#xff09;客户端回应 &a…

【VScode】中文版ChatGPT编程工具-CodeMoss!教程+示例+快捷键

文章目录 1. 多模型选择2. 编辑快捷键3. 历史记录收藏 CodeMoss使用教程1. 安装CodeMoss插件2. 配置AI模型3. 使用快捷键4. 进行代码优化与解释5. 收藏历史记录 总结与展望 在当今快速发展的编程世界中&#xff0c;开发者们面临着越来越多的挑战。如何提高编程效率&#xff0c;…

JqGird 动态生成列使用

使用场景&#xff1a; 在工作用需要自定义动态生成列&#xff0c;通过选择下拉框&#xff0c;加载列&#xff0c;通过查询加载列对应的数据信息 当选择文件源任务显示三列 当选择数据源任务显示两列 处理方式&#xff1a; 1. 首先在刚进入界面时初始化控件 $("#pageGri…

STM32Fxx读写eeprom(AT24C16)

一.I2C 协议简介 I2C 通讯协议 (Inter &#xff0d; Integrated Circuit) 是由 Phiilps 公司开发的&#xff0c;由于它引脚少&#xff0c;硬件实现简单&#xff0c;可扩展性强&#xff0c;不需要 USART、CAN 等通讯协议的外部收发设备&#xff0c;现在被广泛地使用在系统内多个…

鸿蒙系统的优势 开发 环境搭建 开发小示例

HarmonyOS是面向多智能终端、全场景的分布式操作系统,为消费者提供跨终端的无缝体验.华为开发者联盟从HarmonyOS应用设计、开发、测试、推广变现等环节全方位助力开发者。 开发者可以通过以下步骤学习鸿蒙系统的开发&#xff1a; 基础理论学习&#xff1a; 了解鸿蒙系统概述&a…

「C/C++」C/C++的区别

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「C/C」C/C程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasoli…

Windows部署rabbitmq

本次安装环境&#xff1a; 系统&#xff1a;Windows 11 软件建议版本&#xff1a; erlang OPT 26.0.2rabbitmq 3.12.4 一、下载 1.1 下载erlang 官网下载地址&#xff1a; 1.2 下载rabbitmq 官网下载地址&#xff1a; 建议使用解压版&#xff0c;安装版可能会在安装软件…

el-table 滚动条重置 手动控制滚动条

最近在使用 el-table 的时候&#xff0c;出现一个问题&#xff1a; 表头过长的时候&#xff0c;会有左右滑动的操作&#xff0c;当我们把表格拉到最右侧&#xff0c;这个时候重新请求数据的话&#xff0c;表格位置还是在最右侧&#xff0c;不会恢复原位。 那我们想恢复原位&a…

推荐FileLink数据跨网摆渡系统 — 安全、高效的数据传输解决方案

在数字化转型的浪潮中&#xff0c;企业对于数据传输的需求日益增加&#xff0c;特别是在不同网络环境之间的文件共享和传输。为了满足这一需求&#xff0c;FileLink数据跨网摆渡系统应运而生&#xff0c;为企业提供了一种安全、高效的数据传输解决方案。 安全第一&#xff0c;保…

STl学习-迭代器

1.迭代器种类 这五种迭代器的声明如下&#xff1a; truct output_iterator_tag {};//输出迭代器 truct input_iterator_tag{ };//输入迭代器 truct forward iterator tag : public input iterator tag {};//向前迭代器 truct bidirectional iterator tag :public forward iter…

自适应对话式团队构建,提升语言模型代理的复杂任务解决能力

人工智能咨询培训老师叶梓 转载标明出处 如何有效利用多个大模型&#xff08;LLM&#xff09;代理解决复杂任务一直是一个研究热点。由美国南加州大学、宾夕法尼亚州立大学、华盛顿大学、早稻田大学和谷歌DeepMind的研究人员联合提出了一种新的解决方案——自适应团队构建&…

临街矩阵乘以自己转置的含义

总结: 临街矩阵* 邻接矩阵转置的(i,j) 位置表示有多少种线路从元素A跳转一条边最终落到元素j的路线. 这个也叫1_degree.

JavaEE-多线程初阶(3)

目录 1.线程的状态 1.1 NEW、RUNNABLE、TERMINATED 1.2 TIMED_WAITING 1.3 WAITING 1.4 BLOCKED 2.多线程带来的风险-线程安全&#xff08;重点&#xff09; 2.1 观察线程不安全的现象 2.2 分析产生该现象的原因 2.3 产生线程安全问题的原因 2.3.1 抢占式执行&#x…

江协科技STM32学习- P35 硬件I2C读写MPU6050

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…

学习虚幻C++开发日志——定时器

官方文档&#xff1a;虚幻引擎中的Gameplay定时器 | 虚幻引擎 5.5 文档 | Epic Developer Community | Epic Developer Community 定时器 安排在经过一定延迟或一段时间结束后要执行的操作。例如&#xff0c;您可能希望玩家在获取某个能力提升道具后变得无懈可击&#xff0c;…

【简道云 -注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

【表格解决问题】EXCEL行数过多,WPS如何按逐行分别打印多个纸张中

1 问题描述 如图&#xff1a;我的表格行数太多了。打印在一张纸上有点不太好看 2 解决方式 Step01&#xff1a;先选中你需要打印的部分&#xff0c;找到【页面】->【打印区域】->【设置打印区域】 Step02&#xff1a;先选中一行&#xff0c;找到【插入分页符】 Step0…