当前位置: 首页 > news >正文

【五一创作】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具有以下优点:

  1. 高度可定制性:Qt Quick提供了各种内置的UI组件和布局,同时也支持自定义UI组件的创建,使得UI设计师和开发者能够更加灵活地实现他们的设计需求。
  2. 高性能:Qt Quick使用OpenGL进行渲染,能够在多种平台上实现高性能的UI渲染。
  3. 跨平台支持:Qt Quick支持在多种平台上构建现代UI,包括桌面、移动和嵌入式系统。
  4. 易于学习和使用: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项目

  1. 打开Qt Creator的欢迎界面,在下面找到教程,你会在里面找到Qt quick创建的一个教程,

Qt教程

  1. 打开之后,你会发现这个教程很详细地在教你如何创建项目,并给出了一些实例,可能第一次看还不能直接有能力消化教程上的东西(好吧,是我菜),但至少学会了如何创建一个空的Qt quick项目

Qt教程

Qt quick的Helloworld

  1. 创建完一个空项目之后,你就可以直接运行了,运行后发现是个空白的有着“hello world”标题的窗口

hello world空白

  1. 我们可以在里面添加元素使其能够显示“hello world”的文字

    Text{text:"<h2>Hello world<h2>" //这里使用了html标签来更改字体的大小x:100;y:100 //设置位置,从左上角计算color: "darkgreen" //设置颜色}
    

    这里添加的是一个Text元素,顾名思义就是显示文本的元素。上面这段代码要放在Window这段代码之内,运行得到如下图所示的结果。

helloworld文本

利用Image元素加入图片

  1. 上面讲述了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”,效果如下

button

上面代码中有一个“Onclicked”,这是一个信号处理器,当一个属性更改值时,会发出一个信号来告知这个更改,要获取这个信号,只需要创建一个信号处理器(signal handler),它使用“onChanged”语法来命名。例如,Rectangle元素拥有 width和color 属性下面的代码中我们在一个Rectangle对象中定义了两个信号处理器onWidthChanged和onColorChanged,无论何时属性被修改了,都会自动调用它们。

截至现在,如果运行项目的话,应该是这个样子的。

Qt Assistant使用

Qt在安装时都会有Assistant助手,它可以很方便的帮我们定位所要查找和使用的各种东西。

Qt助手

例如,我需要查找map相关的操作,就可以直接搜索“map”,并找到对应模块查看

assistant使用

当然,我也是刚刚学习,其实还不太会使用,属于是边学边写博客。更多的Qml元素也可以在这里面找到。

如,我需要查找map相关的操作,就可以直接搜索“map”,并找到对应模块查看

当然,我也是刚刚学习,其实还不太会使用,属于是边学边写博客。更多的Qml元素也可以在这里面找到。

小结

本文简单讲述Qt quick的项目创建以及几个简单的元素使用,能够实现加载图片,按钮、文本的显示与更改,并提及了Qt 助手的使用。

如果您觉得我写的不错,麻烦给我一个免费的赞!如果内容中有错误,也欢迎向我反馈。

相关文章:

【五一创作】Qt quick基础1(包含基本元素Text Image Rectangle的使用)

Qt quick基础1&#xff08;包含基本元素Text Image Rectangle的使用&#xff09; 目录 Qt quick基础1&#xff08;包含基本元素Text Image Rectangle的使用&#xff09;前言qt中有直接设计ui的拖拽式的widget&#xff0c;为什么还需要Qtquick?QML语言Qt 版本创建一个Qt quick项…...

LVS+Keepalived 高可用群集部署

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

小黑子—Java从入门到入土过程:第八章

Java零基础入门8.0 Java系列第八章1. 双列集合 Map1.1 Map 集合中常见的API1.2 Map 集合的遍历方式1.2 - I 第一种遍历方式&#xff1a;键找值KeySet 方法1.2 - II 第二种遍历方式&#xff1a;键值对 entrySet 方法1.2 - III 第三种遍历方式&#xff1a;lambda表达式 1.3 HashM…...

innodb_flush_log_at_trx_commit 和 sync_binlog 参数解析

这两个参数和MySQL的一致性以及性能相关&#xff0c;默认配置大多数情况下不是最优的。一般来说&#xff0c;互联网线上系统的配置&#xff1a; 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代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

Visual Studio高效调试手段与调试技巧总结

目录 1、对0xCCCCCCCC、0xCDCDCDCD和0xFEEEFEEE等常见异常值的辨识度 2、在Debug下遇到报错弹框,点击重试,查看函数调用堆栈...

Day37 Map集合

Map集合 Map集合是接口&#xff0c;interface Map <K , V> K:键的类型&#xff1b; V&#xff1a;值的类型 将键映射到值得对象&#xff1b;不能包含重复的键&#xff1b;每个键可以映射到最多一个值。例如&#xff1a;001 令狐冲 &#xff1b; 002 岳不群 &#xff1b; …...

是人就能学会的Spring源码教学-Spring的简单使用

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

NOC大赛·核桃编程马拉松赛道知识点大纲(高年级及初中组)

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

第二十六章 Unity碰撞体Collision(上)

在游戏世界中&#xff0c;游戏物体之间的交互都是通过“碰撞接触”来进行交互的。例如&#xff0c;攻击怪物则是主角与怪物的碰撞&#xff0c;触发机关则是主角与机关的碰撞。在DirectX课程中&#xff0c;我们也大致介绍过有关碰撞检测的内容。游戏世界中的3D模型的形状是非常复…...

Qt Installer Framework使用教程:

步骤一&#xff1a; 下载并安装Qt Installer Framework工具 http://download.qt.io/official_releases/qt-installer-framework/ 将安装目录添加到环境变量&#xff0c;如安装D盘时D:\Qt\QtIFW-4.5.0\bin 步骤二&#xff1a; 将测试例子(如D:\Qt\QtIFW-4.5.0\…...

nodejs+vue+java农村信息化服务平台

用户的登录模块&#xff1a;用户登录本系统&#xff0c;对个人的信息等进行查询&#xff0c;操作可使用的功能。 用户注册模块&#xff1a;游客用户可以进行用户注册&#xff0c;系统会反馈是否注册成功。 添加管理员模块&#xff1a;向本系统中添加更多的管理人员&#xff0c;…...

代码随想录补打卡 62不同路径 63 不同路径2

代码如下 func uniquePaths(m int, n int) int { dp : make([][]int,m) //定义一个二维数组 for i : 0 ; i < m ; i { //遍历这个二维数组的每个元素&#xff0c;并将每个元素都定义为一个一维数组 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 表&#xff0c;主键不自增 2 插入主键最大值 3 再次插入主键最大值1 四 没有声明…...

JSP基于Iptables图形管理工具的设计与实现(源代码+论文)

Netfilter/Iptables防火墙是Linux平台下的包过滤防火墙&#xff0c;Iptables防火墙不仅提供了强大的数据包过滤能力&#xff0c;而且还提供转发&#xff0c;NAT映射等功能&#xff0c;是个人及企业级Linux用户构建网络安全平台的首选工具。但是&#xff0c;由于种种原因&#x…...

什么是数据库分片?

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

软件工程知识点

软件工程提出的时代和背景 软件工程化的层次 软件开发过程 敏捷与计划开发 演化式开发和DevOps 软件配置管理过程和相关工具名 软件质量和代码异味 能够分析常见的代码异味和bug 代码复杂度和计算圈复杂度 了解代码异味和重构行为的关系 了解自动化单元测试框架xunit…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

c# 局部函数 定义、功能与示例

C# 局部函数&#xff1a;定义、功能与示例 1. 定义与功能 局部函数&#xff08;Local Function&#xff09;是嵌套在另一个方法内部的私有方法&#xff0c;仅在包含它的方法内可见。 • 作用&#xff1a;封装仅用于当前方法的逻辑&#xff0c;避免污染类作用域&#xff0c;提升…...

Elastic 获得 AWS 教育 ISV 合作伙伴资质,进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...

【安全篇】金刚不坏之身:整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...

Python 高级应用10:在python 大型项目中 FastAPI 和 Django 的相互配合

无论是python&#xff0c;或者java 的大型项目中&#xff0c;都会涉及到 自身平台微服务之间的相互调用&#xff0c;以及和第三发平台的 接口对接&#xff0c;那在python 中是怎么实现的呢&#xff1f; 在 Python Web 开发中&#xff0c;FastAPI 和 Django 是两个重要但定位不…...

GraphRAG优化新思路-开源的ROGRAG框架

目前的如微软开源的GraphRAG的工作流程都较为复杂&#xff0c;难以孤立地评估各个组件的贡献&#xff0c;传统的检索方法在处理复杂推理任务时可能不够有效&#xff0c;特别是在需要理解实体间关系或多跳知识的情况下。先说结论&#xff0c;看完后感觉这个框架性能上不会比Grap…...

C++中vector类型的介绍和使用

文章目录 一、vector 类型的简介1.1 基本介绍1.2 常见用法示例1.3 常见成员函数简表 二、vector 数据的插入2.1 push_back() —— 在尾部插入一个元素2.2 emplace_back() —— 在尾部“就地”构造对象2.3 insert() —— 在任意位置插入一个或多个元素2.4 emplace() —— 在任意…...