前言

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的核心属性，但是核心元素怎么可能就这么点嘞，由于核心元素太多，一篇文章写不下，所以分为多篇文章来写，后续会持续更新本系列，很开心您能够看到这里，希望这篇文章能够对您有所帮助，谢谢！！
在这里插入图片描述