【五一创作】Qt quick基础1(包含基本元素Text Image Rectangle的使用)
Qt quick基础1(包含基本元素Text Image Rectangle的使用)
目录
- Qt quick基础1(包含基本元素Text Image Rectangle的使用)
- 前言
- qt中有直接设计ui的拖拽式的widget,为什么还需要Qtquick?
- QML语言
- Qt 版本
- 创建一个Qt quick项目
- Qt quick的Helloworld
- 利用Image元素加入图片
- 利用Rectangle元素作button
- Qt Assistant使用
- 小结
前言
最近需要看Qt的代码,虽然之前也接触过Qt,但是当时是使用可推拽式的ui设计,虽然体验很好,但是需要看的代码使用的是Qt quick,正好顺便学习一下,记录在此,以便之后忘记作回顾之用。
qt中有直接设计ui的拖拽式的widget,为什么还需要Qtquick?
Qt中设计UI的拖拽式的Widget,例如使用Qt Designer创建的窗口和控件等,这些Widget提供了一个方便且易于学习的方式来构建传统的图形用户界面(GUI),并且是使用C++编写的。
然而,随着移动端和现代化应用程序的兴起,GUI开发也面临着新的挑战。为了适应不同的屏幕尺寸和设备环境,并实现更快、更流畅的交互效果,Qt引入了Qt Quick框架。
Qt Quick是一种基于QML语言的声明式UI设计语言,它使用JavaScript来处理用户输入和逻辑控制,以及OpenGL进行渲染。Qt Quick提供了一种快速、灵活、高性能和可重用的方式来构建现代化应用程序的用户界面。与传统的Widget相比,Qt Quick具有以下优点:
- 高度可定制性:Qt Quick提供了各种内置的UI组件和布局,同时也支持自定义UI组件的创建,使得UI设计师和开发者能够更加灵活地实现他们的设计需求。
- 高性能:Qt Quick使用OpenGL进行渲染,能够在多种平台上实现高性能的UI渲染。
- 跨平台支持:Qt Quick支持在多种平台上构建现代UI,包括桌面、移动和嵌入式系统。
- 易于学习和使用:QML是一种声明式UI设计语言,与其他的UI设计语言相比,具有更低的学习曲线。
因此,尽管Qt中可以使用Widget来构建传统GUI,但Qt Quick提供了一个现代、高效且易于学习和使用的方式来构建现代化应用程序的用户界面。
QML语言
QML是一种声明性语言,用于描述应用程序的用户界面。它将用户界面分解为更小的元素,这些元素可以组合成组件。QML描述了这些用户界面元素的外观和行为。这个用户界面描述可以用JavaScript代码进行充实,以提供简单但也更复杂的逻辑。从这个角度来看,它遵循HTML-JavaScript模式,但QML从一开始就被设计为描述用户界面,而不是文本-文档。
Qt 版本
截至2022年5月3日,qt已经推出了6.6版本,但我使用的Qt5.15和Qt6.2两个版本,这两个版本都是LTS版本,也就是长期支持版本。在我看来,可能版本的不同会造成某些麻烦,如果你去看2012、2015年甚至2019年的Qt教程,可能其中有些内容已经不适用于现在的Qt版本了,当然这些教程大部分仍是适用的。
版本:win11+Qt5.15/6.2,或许选择6.4,6.5也是相当可以的,因为在创建Qt quick项目时,要求最低版本是6.2
创建一个Qt quick项目
- 打开Qt Creator的欢迎界面,在下面找到教程,你会在里面找到Qt quick创建的一个教程,
- 打开之后,你会发现这个教程很详细地在教你如何创建项目,并给出了一些实例,可能第一次看还不能直接有能力消化教程上的东西(好吧,是我菜),但至少学会了如何创建一个空的Qt quick项目
Qt quick的Helloworld
- 创建完一个空项目之后,你就可以直接运行了,运行后发现是个空白的有着“hello world”标题的窗口
-
我们可以在里面添加元素使其能够显示“hello world”的文字
Text{text:"<h2>Hello world<h2>" //这里使用了html标签来更改字体的大小x:100;y:100 //设置位置,从左上角计算color: "darkgreen" //设置颜色}
这里添加的是一个Text元素,顾名思义就是显示文本的元素。上面这段代码要放在Window这段代码之内,运行得到如下图所示的结果。
利用Image元素加入图片
-
上面讲述了Text元素,接下来我们来尝试一下Image元素,它是用来插入和设置图片的,可以加载本地资源中的图片也可以加载url地址的资源图片,下面就以网络图片为例
Image{x:12;y:250source: "https://ts1.cn.mm.bing.net/th/id/R-C.c1ef7c28ec0c3a03671bf8c5b84824a9?rik=gtgH8z39ogolSA&riu=http%3a%2f%2fimg.touxiangwu.com%2fuploads%2fallimg%2f230101%2f1_010120010R534.jpg&ehk=%2bP%2fA9Bc1Xw28uBxAFWEP0qGpscER%2bd8hq%2flkynX4qUw%3d&risl=&pid=ImgRaw&r=0"//可以加载网页图片}
上面图片是我在网上随便找的,Image元素的用法当然远不止此,这里仅仅是做个展示。运行得到下面的结果
利用Rectangle元素作button
Rectangle是一个长方形区域,里面可以嵌套各种各样的元素以达到各种效果。
Rectangle{id:button //调用这个矩形区域的唯一标识符,在程序中不允许重复x:500;y:300width:116;height:26color: "lightsteelblue"border.color: "slategrey" //设置边界颜色Text { //嵌套Text元素anchors.centerIn: parent //此处的parent即为Rectangletext: qsTr("start") //文本}MouseArea{ //鼠标区域元素anchors.fill: parent //鼠标区域即为整个RectangleonClicked: {status.text ="Button clicked" //当被按下时,status的文本变为“button clicked”,staus这段代码还没涉及}}}
上述又出现了一个新的元素MouseArea,这个元素即是鼠标区域,用来响应鼠标的各种事件。
Text{id:status //idx:500;y:350width: 116;height:26text: "waiting..."horizontalAlignment: Text.AlignHCenter}
这段代码和上述的代码所形成的效果是,上段的Rectangle被按下后,下段文本由“Waiting”变为“Button Clicked”,效果如下
上面代码中有一个“Onclicked”,这是一个信号处理器,当一个属性更改值时,会发出一个信号来告知这个更改,要获取这个信号,只需要创建一个信号处理器(signal handler),它使用“onChanged”语法来命名。例如,Rectangle元素拥有 width和color 属性下面的代码中我们在一个Rectangle对象中定义了两个信号处理器onWidthChanged和onColorChanged,无论何时属性被修改了,都会自动调用它们。
截至现在,如果运行项目的话,应该是这个样子的。
Qt Assistant使用
Qt在安装时都会有Assistant助手,它可以很方便的帮我们定位所要查找和使用的各种东西。
例如,我需要查找map相关的操作,就可以直接搜索“map”,并找到对应模块查看
当然,我也是刚刚学习,其实还不太会使用,属于是边学边写博客。更多的Qml元素也可以在这里面找到。
如,我需要查找map相关的操作,就可以直接搜索“map”,并找到对应模块查看
当然,我也是刚刚学习,其实还不太会使用,属于是边学边写博客。更多的Qml元素也可以在这里面找到。
小结
本文简单讲述Qt quick的项目创建以及几个简单的元素使用,能够实现加载图片,按钮、文本的显示与更改,并提及了Qt 助手的使用。
如果您觉得我写的不错,麻烦给我一个免费的赞!如果内容中有错误,也欢迎向我反馈。
相关文章:

【五一创作】Qt quick基础1(包含基本元素Text Image Rectangle的使用)
Qt quick基础1(包含基本元素Text Image Rectangle的使用) 目录 Qt quick基础1(包含基本元素Text Image Rectangle的使用)前言qt中有直接设计ui的拖拽式的widget,为什么还需要Qtquick?QML语言Qt 版本创建一个Qt quick项…...

LVS+Keepalived 高可用群集部署
一、LVSKeepalived 高可用群集 在这个高度信息化的 IT 时代,企业的生产系统、业务运营、销售和支持,以及日常管理等环节越来越依赖于计算机信息和服务,对高可用(HA)技术的应用需求不断提高,以便提供持续的…...

小黑子—Java从入门到入土过程:第八章
Java零基础入门8.0 Java系列第八章1. 双列集合 Map1.1 Map 集合中常见的API1.2 Map 集合的遍历方式1.2 - I 第一种遍历方式:键找值KeySet 方法1.2 - II 第二种遍历方式:键值对 entrySet 方法1.2 - III 第三种遍历方式:lambda表达式 1.3 HashM…...
innodb_flush_log_at_trx_commit 和 sync_binlog 参数解析
这两个参数和MySQL的一致性以及性能相关,默认配置大多数情况下不是最优的。一般来说,互联网线上系统的配置: innodb_flush_log_at_trx_commit —— 0 sync_binlog —— 1000 一、innodb_flush_log_at_trx_commit 事务提交刷盘时机 如果我…...

hd debug - DAPLink的资料
文章目录 DAPLink的资料概述笔记库迁出的技巧END DAPLink的资料 概述 查资料时, 看到有DAPLink的资料, 记录一下. 笔记 DAPLink项目分为软件和硬件2部分, 不在一个库中. 总览 : https://daplink.io/ 这个页面上说了软件和硬件项目的库地址. 软件库地址 : https://github.…...
Android adb常用50条命令
1. adb devices - 列出所有连接的 Android 设备及模拟器 2. adb shell - 启动 Android 设备或模拟器的 shell 终端 3. adb install - 安装 APK 文件 4. adb uninstall - 卸载 APK 文件 5. adb logcat - 查看日志输出信息,用于调试应用 6. adb push - 将文件推送到 Andro…...

【无人车】无人驾驶地面车辆避障研究(Matlab代码实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...
Visual Studio高效调试手段与调试技巧总结
目录 1、对0xCCCCCCCC、0xCDCDCDCD和0xFEEEFEEE等常见异常值的辨识度 2、在Debug下遇到报错弹框,点击重试,查看函数调用堆栈...
Day37 Map集合
Map集合 Map集合是接口,interface Map <K , V> K:键的类型; V:值的类型 将键映射到值得对象;不能包含重复的键;每个键可以映射到最多一个值。例如:001 令狐冲 ; 002 岳不群 ; …...

是人就能学会的Spring源码教学-Spring的简单使用
是人就能学会的Spring源码教学-Spring的简单使用 Spring的最简单入门使用第一步 创建项目第二步 配置项目第三步 启动项目 Spring的最简单入门使用 各位道友且跟我一道来学习Spring的最简单的入门使用,为了方便和简单,我使用了Spring Boot项目ÿ…...

NOC大赛·核桃编程马拉松赛道知识点大纲(高年级及初中组)
NOC核桃编程马拉松知识点大纲(高年级及初中组) (一)基础语法 1.掌握运动积木的用法。 包括“移动 10 步”、“左/右转 X 度”、“面向 X 方向/鼠标指针/ 角色”、“移到 XY 坐标/鼠标/角色”、“X/Y 坐标的设定和增加”、 “滑行到 XY/鼠标/角色”等积木用法,详细如下。 1…...

第二十六章 Unity碰撞体Collision(上)
在游戏世界中,游戏物体之间的交互都是通过“碰撞接触”来进行交互的。例如,攻击怪物则是主角与怪物的碰撞,触发机关则是主角与机关的碰撞。在DirectX课程中,我们也大致介绍过有关碰撞检测的内容。游戏世界中的3D模型的形状是非常复…...
Qt Installer Framework使用教程:
步骤一: 下载并安装Qt Installer Framework工具 http://download.qt.io/official_releases/qt-installer-framework/ 将安装目录添加到环境变量,如安装D盘时D:\Qt\QtIFW-4.5.0\bin 步骤二: 将测试例子(如D:\Qt\QtIFW-4.5.0\…...

nodejs+vue+java农村信息化服务平台
用户的登录模块:用户登录本系统,对个人的信息等进行查询,操作可使用的功能。 用户注册模块:游客用户可以进行用户注册,系统会反馈是否注册成功。 添加管理员模块:向本系统中添加更多的管理人员,…...
代码随想录补打卡 62不同路径 63 不同路径2
代码如下 func uniquePaths(m int, n int) int { dp : make([][]int,m) //定义一个二维数组 for i : 0 ; i < m ; i { //遍历这个二维数组的每个元素,并将每个元素都定义为一个一维数组 dp[i] make([]int,n) //这样就生成了图中的一个二维网格 dp[i][0] …...

树的存储和遍历
文章目录 6.5 树与森林6.5.1 树的存储结构1. 双亲表示法(顺序存储结构)2 孩子链表表示法3 孩子兄弟表示法(二叉树表示法) 6.5.2 森林与二叉树的转换1 树转换成二叉树2 二叉树转换成树3 森林转换成二叉树4 二叉树转换成森林 6.5.3 树和森林的遍历1. 树的遍历2. 森林的遍历 6.6 赫…...

MySQL的ID用完了,怎么办?
目 录 一 首先首先分情况 二 自增ID 1 mysql 数据库创建一个自增键的表 2 导出表结构 3 重新创建 自增键是4294967295的表 4 查看表结构 5 异常测试 三 填充主键 1 首先创建一个test 表,主键不自增 2 插入主键最大值 3 再次插入主键最大值1 四 没有声明…...
JSP基于Iptables图形管理工具的设计与实现(源代码+论文)
Netfilter/Iptables防火墙是Linux平台下的包过滤防火墙,Iptables防火墙不仅提供了强大的数据包过滤能力,而且还提供转发,NAT映射等功能,是个人及企业级Linux用户构建网络安全平台的首选工具。但是,由于种种原因&#x…...

什么是数据库分片?
什么是数据库分片? 数据库分片是指将一个大型数据库拆分成多个小型数据库,每个小型数据库称为一个分片。通过这种方式,可以将数据库的负载分散到多个服务器上,从而提高数据库的性能和可伸缩性。 为什么需要数据库分片?…...

软件工程知识点
软件工程提出的时代和背景 软件工程化的层次 软件开发过程 敏捷与计划开发 演化式开发和DevOps 软件配置管理过程和相关工具名 软件质量和代码异味 能够分析常见的代码异味和bug 代码复杂度和计算圈复杂度 了解代码异味和重构行为的关系 了解自动化单元测试框架xunit…...
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以? 在 Golang 的面试中,map 类型的使用是一个常见的考点,其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

边缘计算医疗风险自查APP开发方案
核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
解锁数据库简洁之道:FastAPI与SQLModel实战指南
在构建现代Web应用程序时,与数据库的交互无疑是核心环节。虽然传统的数据库操作方式(如直接编写SQL语句与psycopg2交互)赋予了我们精细的控制权,但在面对日益复杂的业务逻辑和快速迭代的需求时,这种方式的开发效率和可…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...

cf2117E
原题链接:https://codeforces.com/contest/2117/problem/E 题目背景: 给定两个数组a,b,可以执行多次以下操作:选择 i (1 < i < n - 1),并设置 或,也可以在执行上述操作前执行一次删除任意 和 。求…...

Mac软件卸载指南,简单易懂!
刚和Adobe分手,它却总在Library里给你写"回忆录"?卸载的Final Cut Pro像电子幽灵般阴魂不散?总是会有残留文件,别慌!这份Mac软件卸载指南,将用最硬核的方式教你"数字分手术"࿰…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机(Finite Automaton, FA)到正规文法(Regular Grammar)转换器,它配备了一个直观且完整的图形用户界面,使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问(基础概念问题) 1. 请解释Spring框架的核心容器是什么?它在Spring中起到什么作用? Spring框架的核心容器是IoC容器&#…...
Go 语言并发编程基础:无缓冲与有缓冲通道
在上一章节中,我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道,它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好࿰…...