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

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

相关文章

微服务系列二:跨微服务请求优化,注册中心+OpenFeign

目录 前言 一、纯 RestTemplate 方案存在的缺陷 二、注册中心模式介绍 三、注册中心技术&#xff1a;Nacos 3.1 Docker部署Nacos 3.2 服务注册 3.3 服务发现 四、代码优化&#xff1a;OpenFeign工具 4.1 OpenFeign快速入门 4.2 连接池的必要性 4.3 抽取服务、最佳实…

andrular输入框input监听值传递

效果图&#xff1a; step1: E:\projectgood\ajnine\untitled4\src\app\apple\apple.component.html <button mat-button (click)“openDialog()”>Open dialog step2: E:\projectgood\ajnine\untitled4\src\app\apple\apple.component.ts import {Component, inject}…

像`npm i`作为`npm install`的简写一样,使用`pdm i`作为`pdm install`的简写

只需安装插件pdm-plugin-i即可&#xff1a; pdm plugin add pdm-plugin-i 然后就可以愉快地pdm i了&#xff0c;例如&#xff1a; git clone https://github.com/waketzheng/fast-dev-cli cd fast-dev-cli python -m pip install --user pipx pipx install pdm pdm plugin a…

qt QTabWidget详解

1、概述 QTabWidget是Qt框架中的一个控件&#xff0c;它提供了一个标签页式的界面&#xff0c;允许用户在不同的页面&#xff08;或称为标签&#xff09;之间切换。每个页面都可以包含不同的内容&#xff0c;如文本、图像、按钮或其他小部件。QTabWidget非常适合用于创建具有多…

关于wordpress instagram feed 插件 (现更名为Smash Balloon Social Photo Feed)

插件地址&#xff1a; Smash Balloon Social Photo Feed – Easy Social Feeds Plugin – WordPress 插件 | WordPress.org China 简体中文 安装后&#xff0c;配置教程&#xff1a; Setting up the Instagram Feed Pro WordPress Plugin - Smash Balloon 从这里面开始看就…

初始JavaEE篇——多线程(5):生产者-消费者模型、阻塞队列

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;JavaEE 文章目录 阻塞队列生产者—消费者模型生产者—消费者模型的优势&#xff1a;生产者—消费者模型的劣势&#xff1a; Java标准库中的阻…

用ChatGPT提升工作效率:从理论到实际应用

伴人工智能技术的迅速演进&#xff0c;像ChatGPT这类语言模型已成为提升工作效率的关键工具。这类模型不仅具备处理海量数据的能力&#xff0c;还能自动化许多日常任务&#xff0c;从而提高决策的准确性。本文将深入探讨如何在工作中利用ChatGPT等AI工具提升效率&#xff0c;涵…

如何修改网络ip地址:一步步指南‌

在当今这个数字化时代&#xff0c;网络已成为我们日常生活与工作中不可或缺的一部分。无论是浏览网页、在线办公还是享受流媒体服务&#xff0c;稳定的网络连接和适当的IP地址管理都是确保良好体验的关键。然而&#xff0c;出于隐私保护、绕过地理限制或测试网络环境等需要&…

ENSP (虚拟路由冗余协议)VRRP配置

VRRP&#xff08;Virtual Router Redundancy Protocol&#xff0c;虚拟路由冗余协议&#xff09;是一种用于提高网络可用性和可靠性的协议。它通过在多个路由器之间共享一个虚拟IP地址&#xff0c;确保即使一台路由器发生故障&#xff0c;网络依然能够正常运行&#xff0c;防止…

SpringCloud Alibaba-05 Seata分布式事务处理

一次业务操作需要跨多个数据源或需要跨多个系统进行远程调用&#xff0c;就会产生分布式事务问题。但是关系型数据库提供的能力是基于单机事务的&#xff0c;一旦遇到分布式事务场景&#xff0c;就需要通过更多其他技术手段来解决问题。 1.四大模式&#xff1a; Seata AT模式(主…

非线性数据结构之图

一、有向图&#xff08;Directed Graph&#xff09; 1. 定义 有向图是一个由顶点&#xff08;节点&#xff09;和有方向的边&#xff08;弧&#xff09;组成的图。在有向图中&#xff0c;每条边都有一个起点和一个终点&#xff0c;表示从一个顶点到另一个顶点的关系。 2. 特…

大数据之Hadoop集群

Hadoop集群介绍&#xff1f;Hadoop集群的优缺点及应用场景&#xff1f;Hadoop集群搭建&#xff1f;Hadoop架构&#xff1f; Hadoop集群介绍 Hadoop集群是由多台计算机&#xff08;节点&#xff09;组成的一个分布式计算系统&#xff0c;主要用于处理大规模的数据集。以下是对Ha…

云原生+AI核心技术&最佳实践

以下内容是我在陕西理工大学2023级人工智能专业和网络专业的演讲内容&#xff0c;分享给大家。 各位老师、同学们&#xff0c;大家好啊&#xff01;能在这里跟大家一起聊聊咱们计算机专业那些事儿&#xff0c;我真的觉得超级兴奋&#xff01; 首先&#xff0c;自我介绍一下&am…

数字信号处理Python示例(5)使用实指数函数仿真PN结二极管的正向特性

文章目录 前言一、二极管的电流-电压关系——Shockley方程二、PN结二极管正向特性的Python仿真三、仿真结果分析写在后面的话 前言 使用Python代码仿真了描述二极管的电流-电压关系的Shockley方程&#xff0c;对仿真结果进行了分析&#xff0c;说明在正向偏置区域&#xff0c;…

真·香!深度体验 zCloud 数据库云管平台 -- DBA日常管理篇

点击蓝字 关注我们 zCloud 作为一款业界领先的数据库云管平台&#xff0c;通过云化自治的部署能力、智能巡检和诊断能力、知识即代码的沉淀能力&#xff0c;为DBA的日常管理工作带来了革新式的简化与优化。经过一周的深度体验&#xff0c;今天笔者与您深入探讨 zCloud 在数据库…

ICPC区域赛成都站【赛后回顾+总结】

传送门 前言赛后总结赛后回顾赛后感悟 前言 首先&#xff0c;这是本人本赛季第一场XCPC区域赛&#xff0c;也是本人算竞生涯中第一场XCPC区域赛&#xff08;之前只打过邀请赛和省赛&#xff09;。 赛后总结 然后赛后总结一下&#xff1a;我队天崩开局&#xff0c;我队出师不利…

Linux和,FreeRTOS 任务调度原理,r0-r15寄存器,以及移植freertos(一)

目录、 1、r0-r15寄存器&#xff0c;保护现场&#xff0c;任务切换的原理 2、freertos移植 3、freertos的任务管理。 一、前言 写这篇文章的目的&#xff0c;是之前面试官&#xff0c;刚好问到我&#xff0c;移植FreeRTOS 到mcu&#xff0c;需要做哪些步骤&#xff0c;当时回…

如果 MySQL 主库出现了问题,从库该何去何从呢?

🚀 博主介绍:大家好,我是无休居士!一枚任职于一线Top3互联网大厂的Java开发工程师! 🚀 🌟 在这里,你将找到通往Java技术大门的钥匙。作为一个爱敲代码技术人,我不仅热衷于探索一些框架源码和算法技巧奥秘,还乐于分享这些宝贵的知识和经验。 💡 无论你是刚刚踏…

基于Matlab 模拟停车位管理系统【源码 GUI】

系统对进入停车位的车辆进行车牌识别&#xff0c;将识别出来的车牌号显示出来&#xff1b;然后对车主进行人脸识别&#xff0c;框出车主照片的人脸部分作为车主信息的标记&#xff0c;记录在系统库中。车辆在库期间&#xff0c;系统使用者可以随意查看车辆与车主信息的获取过程…

【docker】docker 环境配置及安装

本文介绍基于 官方存储库 docker 的环境配置、安装、代理配置、卸载等相关内容。 官方安装文档说明&#xff1a;https://docs.docker.com/engine/install/ubuntu/ 主机环境 宿主机环境 Ubuntu 20.04.6 LTS 安装步骤 添加相关依赖 sudo apt-get update sudo apt-get install…