Qt Quick系列(2)—核心元素类型(1)

news/2024/7/24 13:41:03/

🚀作者:CAccept
🎂专栏:Qt Quick
在这里插入图片描述

文章目录

  • 前言
  • Item
    • Rectangle
    • Text
    • Image
    • MouseArea
  • 总结

前言

Qt Quick的元素分为
1、视觉元素(如Rectangle)具有几何属性
2、非视觉元素(如Timer)提供一般功能,用于控制视觉元素
以下是Qt Quick的一些核心元素类型:

  • Item:所有可视元素的基类,用于表示屏幕上的矩形区域。

  • Rectangle:表示屏幕上的矩形区域,可以设置颜色、边框、圆角等属性。

  • Text:用于在屏幕上显示文本,可以设置字体、颜色、对齐方式等属性。

  • Image:用于在屏幕上显示图像,可以加载本地或远程图像文件。

  • ListView:用于在屏幕上显示列表数据,可以设置模型、委托、滚动条等属性。

  • GridView:用于在屏幕上显示网格数据,可以设置模型、委托、滚动条等属性。

  • TextInput:用于在屏幕上显示单行或多行文本输入框,可以设置占位符、文本格式等属性。

  • Button:用于在屏幕上显示按钮,可以设置文本、图标、颜色等属性。

  • CheckBox:用于在屏幕上显示复选框,可以设置文本、状态等属性。

  • RadioButton:用于在屏幕上显示单选框,可以设置文本、状态等属性。

  • ProgressBar:用于在屏幕上显示进度条,可以设置进度、颜色等属性。

  • Loader:用于在屏幕上动态加载其他QML文件或组件。

这些元素类型是Qt Quick中最常用的元素类型,但Qt Quick还有其他很多元素类型,可以根据需要进行使用。


Item

"Item"是Qt Quick中的一个核心元素类型,它是所有可视元素的基类。在Qt Quick中,所有的可视元素(如矩形、文本、图像等)都是从"Item"派生而来的。

“Item"用于表示屏幕上的矩形区域,虽然不绘制任何东西,但定义了所有视觉元素的共同属性,比如可以设置位置、大小、旋转、缩放、透明度等属性,还提供了键处理变换视觉等功能。它可以作为其他元素类型的容器,用于组合多个元素形成更复杂的界面。例如,可以创建一个"Item”,然后在它内部添加多个"Rectangle"、"Text"等元素,从而形成一个复杂的界面。
在Qt Quick中,所有的元素都是基于"Item"构建的。因此,理解"Item"的概念非常重要,它是构建Qt Quick界面的基石。
在这里插入图片描述
在这里插入图片描述

更多信息在Qt Creator帮助文档中搜索Item


Rectangle

Rectangle也是Qt Quick的核心元素类型之一,它继承自Item,他有很多属性,包含:圆角(radius)渐变色(gradient)抗锯齿(antialiasing默认为true)
来看个代码就知道了,有注释哟👇

//选择合适自己的版本
import QtQuick 2.9
import QtQuick.Window 2.0Window {visible: truewidth: 640height: 480title: qsTr("Rectangle")Rectangle{id: rec1x: 100;y: 50width: 70height: 90//渐变效果gradient: Gradient{//设置关键点(position标记的是y轴上的位置)//position:0.0表示最上面(顶部)//position:1.0表示最下面(底部)GradientStop{position:0.0;color:"green"}GradientStop{position:1.0;color:"red"}}//边缘颜色border.color:"slategray"}Rectangle{id: rec2x: 200;y: 50width: 70height: 90color: "lightsteelblue"//圆角效果radius:20//边缘颜色border.color:"slategray"//边缘的宽度border.width: 4}
}

运行效果
在这里插入图片描述

Text

Text是一个常用的核心元素类型,用于显示文本。Text元素可以显示静态文本,也可以显示绑定到模型或属性的动态文本。(绑定语句可以这样设置:text:变量1,当变量1发生改变时,那么text也会自然发生改变)
Text元素有许多属性可以用于控制文本的显示。下面是一些常用的属性:

  • text:用于指定要显示的文本内容。
  • font.family:用于指定字体的名称,如"Arial"。
  • font.pointSize:用于指定字体的大小。
  • font.bold:用于指定文本是否加粗。
  • font.italic:用于指定文本是否斜体。
  • color:用于指定文本的颜色。
  • wrapMode:用于指定文本的换行方式(Text.Wrap、Text.WordWrap、Text.NoWrap等),只有在设置了宽度的情况下才有效。
  • horizontalAlignment:用于指定文本的水平对齐方式(Text.AlignLeft、Text.AlignRight、Text.AlignHCenter等)。
  • verticalAlignment:用于指定文本的垂直对齐方式(Text.AlignTop、Text.AlignBottom、Text.AlignVCenter等)。
  • elide:用于指定文本溢出时的处理方式(Text.ElideNone、Text.ElideLeft、Text.ElideMiddle、Text.ElideRight等),根据宽度将省略符放置在哪里。
  • maximumLineCount:用于指定文本的最大行数。
  • clip:用于指定是否对超出文本区域的部分进行裁剪。
  • style:用于指定文本的样式,如加下划线、删除线等。
  • stylecolor:要和color进行区分,color是文本本身的颜色,而styleColor表示的是style设置样式(比如Sunken凹陷)的颜色
import QtQuick 2.9
import QtQuick.Window 2.0Window {visible: truewidth: 640height: 480title: qsTr("Text")Text{id:text1text:"Hello Qt Quick"//设置凹陷效果style: Text.Sunken//产生效果的颜色styleColor: "#000000"color: "#FFFFFF"//设置字体font.family: "宋体"//设置大小font.pixelSize: 28}Text{id:text2//将宽度设置为40,而elide也要设置才会使得width有效width:40//根据宽度将省略符放置在哪里,设置成省略符放到中间elide:Text.ElideMiddley:text1.y+text1.height+30text:"Hello World"//产生效果的颜色color: "#303030"//设置换行,这个只要一设置就会把elide的设置给屏蔽掉wrapMode: Text.WordWrapfont.italic: truefont.bold: truefont.pixelSize: 28}
}

运行效果
在这里插入图片描述


Image

Image是一个用于显示图像的核心元素类型。可以使用Image元素来显示静态图像,也可以使用它来显示与模型或属性绑定的动态图像。使用Image元素可以指定图像的路径缩放方式裁剪方式等属性。

  • source:用于指定要显示的图像的路径或URL。
  • fillMode:用于指定图像的缩放方式(Image.Stretch、Image.PreserveAspectFit、Image.PreserveAspectCrop等)
    1、Image.Stretch:图像会被拉伸以填充元素的整个空间,不保持图像原始宽高比。
    2、Image.PreserveAspectFit:图像会按照等比例缩放以适应元素的边界,但不会超出元素的空间,保持图像原始宽高比。图像将居中显示在元素内部。
    3、Image.PreserveAspectCrop:图像会按照等比例缩放以填充元素的整个空间,可能会超出元素的空间,保持图像原始宽高比。如果图像宽高比与元素宽高比不同,则会裁剪掉部分图像。图像将居中显示在元素内部。
    4、Image.Tile:图像将平铺到元素的整个空间中,保持图像原始宽高比。如果图像宽高比与元素宽高比不同,则图像将被拉伸或缩小以适应元素的空间。
  • width:用于指定元素的宽度。
  • height:用于指定元素的高度。
  • smooth:用于指定图像是否平滑缩放。
    上面只是列举了几种常用的,还有很多别的属性,可以通过帮助文档进行检索
import QtQuick 2.9
import QtQuick.Window 2.0
Window {visible: truewidth: 640height: 480title: qsTr("Image")Image {id:image1source: "image1.jpg"fillMode: Image.PreserveAspectFit}Image{x:image1.x+image1.width+12//宽度设置为原来的一半width: image1.width/2height:image1.heightsource:"image1.jpg"}Image{y:image1.y+image1.height+12width: image1.width/2height:image1.height//Image.PreserveAspectCrop:图像会按照等比例缩放以填充元素的整个空间,可能裁剪fillMode: Image.PreserveAspectCropsource:"image1.jpg"}Image{x:image1.x+image1.width+12y:image1.y+image1.height+12width: image1.width/2height:image1.height//Image.PreserveAspectFit:保留原来的比例(宽和高之间的比例)自适应大小fillMode: Image.PreserveAspectFitsource:"image1.jpg"}
}

运行效果
在这里插入图片描述

MouseArea

MouseArea是一个举行不可见项,可以在其中捕获鼠标事件,这个就比较简单了就直接看代码吧👇

import QtQuick 2.9
import QtQuick.Window 2.0Window {visible: truewidth: 640height: 480title: qsTr("MouseArea")Rectangle{id: rec1x: 200;y: 50width: 70height: 90color: "lightsteelblue"MouseArea{id:areawidth: parent.widthheight: parent.height//点击矩形框rec1内部,矩形框rec2会不可见,再点击又回显形可见onClicked: rec2.visible=!rec2.visible}}Rectangle{id: rec2x: 300;y: 50width: 70height: 90color: "lightsteelblue"MouseArea{id:area1width: parent.widthheight: parent.height//点击矩形框rec2内部,矩形框rec1会不可见,再点击又回显形可见onClicked: rec1.visible=!rec1.visible}}
}

运行效果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


总结

这篇文章总结了Item、Rectangle、Text、Image以及MouseArea几大Qt Quick的核心属性,但是核心元素怎么可能就这么点嘞,由于核心元素太多,一篇文章写不下,所以分为多篇文章来写,后续会持续更新本系列,很开心您能够看到这里,希望这篇文章能够对您有所帮助,谢谢!!
在这里插入图片描述


http://www.ppmy.cn/news/76012.html

相关文章

微波基础介绍

1、什么是微波 大家在高中物理中都学过电磁波,可见光、微波都是电磁波波段,如下图所示,可见光谱只占有宽广的电磁波谱的一小部分: 而我们这次的主角微波,是频率范围300MHz到3THz的电磁波(1THz1000GHz&…

AI人工智能预处理数据的方法和技术有哪些?

AI人工智能 预处理数据 在人工智能(Artificial Intelligence,简称AI)领域中,数据预处理是非常重要的一环。它是在将数据输入到模型之前对数据进行处理和清洗的过程。数据预处理可以提高模型的准确性、可靠性和可解释性。 本文将…

python+django植物园性毒源成分管理系统

在Internet高速发展的今天,我们生活的各个领域都涉及到计算机的应用,其中包括植物性毒源成分管理系统的网络应用,在外国植物性毒源成分管理系统已经是很普遍的方式,不过国内的植物性毒源成分管理可能还处于起步阶段。植物性毒源成…

YOLO NAS note 1

Git Hub: https://github.com/Deci-AI/super-gradients Yolo-Nas 的代码比YOLO v8 还恐怖。之前的YOLO数据可以通过: coco_detection_yolo_format_train, 和 coco_detection_yolo_format_val 自动转。 这里写目录标题 Train数据获取数据增强训练criteri…

js中的类

1、构造函数与类 class Person{// 构造函数// 构造函数在调用类,实例化对象时调用constructor(name,age){console.log(构造器被调用了!);console.log(name,age);// 在构造函数中,this表示当前所创建的对象// this.name对象的属性&#xff0c…

软件设计和架构设计

软件设计和架构设计 1.软件设计 1.1设计 设计是从架构 构件 接口以及系统其他特征定义的过程。 软件设计的结果必须描述系统的架构,系统如何分解和组织构件。 描述构件间的接口。 描述构件必须详细到可进一步构造的程度。 设计是把分析模型转换成设计模型的过…

c++虚函数详解(多态特性)

1.c多态的概念 多态是c的特征之一 多态的分类:静态多态(静态联编)、动态多态(动态联编) 静态多态(静态联编):函数入口地址 是在 编译阶段 确定(运算符重载、函数重载&…

IOS新建应用

一:Application App。普通app。Document App。打开是记事本类似App。Game。新建游戏相关app。RealityKit为新建一个打开摄像机,一个Ar立方体的应用。 SenceKit为有一架飞机旋转的游戏App。 SpirteKit为一个手指头按上会出一个手指特效的应用。 Metal为一…

MySql常用命令总结

1:使用SHOW语句找出在服务器上当前存在什么数据库: mysql> SHOW DATABASES; 2:2、创建一个数据库MYSQLDATA mysql> CREATE DATABASE MYSQLDATA; 3:选择你所创建的数据库 mysql> USE MYSQLDATA; (按回车键出现Database changed 时说明操作成功!)…

抖音账号运营技巧,让你的短视频更火爆

抖音是目前最火爆的短视频平台之一,拥有着庞大的用户群体和广阔的市场前景。在这个平台上,每天都有大量的用户在发布自己的短视频内容,让自己的账号脱颖而出并吸引更多的粉丝,成为每个用户所追求的目标。下面就来介绍一些抖音账号…

应用程序和 API 攻击呈上升趋势

Akamai Technologies 发布了一份新的互联网现状报告,标题为“突破安全漏洞:针对组织的应用程序和 API 攻击的兴起”。 报告显示,亚太地区和日本(APJ)的金融服务业仍然是该地区受攻击最严重的行业,Web 应用…

mqtt服务管理配置

mqtt服务管理配置mosquitto.conf配置文件 windows查找占用端口 netstat -aon|findstr 1883 linux查找占用端口 netstat -antlp|grep “1883” 服务启动 mosquitto -c mosquitto.conf -v 指定端口启动 mosquitto -p 指定端口号码 添加用户 mosquitto_passwd -b “C:/Program Fi…

Docker介绍、常用命令、项目部署

什么是Docker 简单说:Docker就是一个虚拟机,专业说:它是一个开源的容器平台。它和我们常用的VMware有很多相似的地方。 名词解释 镜像/images 由本体打包出来的文件。并不是文件本身,但是具有该文件的功能。举个不太贴切的例子&…

基于Rancherwebhook微服务的弹性伸缩实现

一、引言 随着云计算技术的不断发展,弹性伸缩已成为云环境下实现高可用性、可扩展性、资源优化和负载均衡的重要手段。Rancherwebhook微服务是一种基于容器的云原生应用管理平台,提供了一种方便、快捷、高效的方式来管理容器编排和弹性伸缩。本文将介绍如…

LeetCode:29. 两数相除

29. 两数相除 1)题目2)思路3)代码1.初始代码2.第一次优化3.第二次优化 4)结果1.初始结果2.第一次优化结果3.第二次优化结果 1)题目 给你两个整数,被除数 dividend 和除数 divisor。将两数相除,…

基于Freertos的ESP-IDF开发——7.WS2812B彩色灯循环

基于Freertos的ESP-IDF开发——7.WS2812B彩色灯循环 0. 前言1. WS2812B简介2. 完整代码3. 演示效果4. 其他FreeRtos文章 0. 前言 本节使用WS2812B实现彩灯循环 开发环境:ESP-IDF 4.3 操作系统:Windows10 专业版 开发板:自制的ESP32-WROOM-3…

Python关于Pandas的iterrows、itertuples等遍历表格时读取不到第一行的问题

一、问题原因 df.iterrows() 是用来遍历 Pandas DataFrame 的方法,它会把 DataFrame 中的每一行转换成一个元组,其中第一个元素是行号,第二个元素是该行的数据。行号从 0 开始。 在使用 df.iterrows() 遍历 DataFrame 的时候发现表格第二行…

CMD与DOS脚本编程【第六章】

预计更新 第一章. 简介和基础命令 1.1 介绍cmd/dos脚本语言的概念和基本语法 1.2 讲解常用的基础命令和参数,如echo、dir、cd等 第二章. 变量和运算符 2.1 讲解变量和常量的定义和使用方法 2.2 介绍不同类型的运算符和运算规则 第三章. 控制流程和条件语句 3.1 介…

组合数学第二讲

可以把取出来的数从小到大排序,第一个数不变,第二个数1,以此类推... 总共的情况为,数字取完后可再依次减回去,保证数在100以内 k-element multisets 引出下面的二项式系数 binomial coefficients(二项式系…

FAT NTFS Ext3文件系统有什么区别

10 年前 FAT 文件系统还是常见的格式,而现在 Windows 上主要是 NTFS,Linux 上主要是Ext3、Ext4 文件系统。关于这块知识,一般资料只会从支持的磁盘大小、数据保护、文件名等各种维度帮你比较,但是最本质的内容却被一笔带过。它们最…