QML学习(八) Quick中的基础组件：Item，Rectangle，MouseArea说明及使用场景和使用方法

上一篇中我们从设计器里可以看到Qt Quick-Base中有几大基础组件，如下图，这篇文章先介绍下Item，Rectangle，MouseArea这三个的说明及使用场景和使用方法
在这里插入图片描述

Item
Item 是 QML 中所有可视元素的基类，是一个非常基础和通用的元素。所以许多 QML 元素都继承了 Item 的属性和行为，形成了一个庞大的可视元素层次结构；
它提供了基本的属性，如 x、y、width、height、opacity、visible 等，可用于布局、定位和显示内容；
可以作为容器元素，将多个子元素组合在一起，方便进行布局管理和组织；
通常用于创建自定义组件，或者作为一个占位元素，可以在其上添加其他的可视元素，如 Rectangle、Text、Image 等；
Item 本身没有窗口的边界和标题栏，它的布局通常是在其父元素的范围内，可能是另一个 Item 或 Window；
其位置和大小通常是相对于父元素的坐标系统，可以使用布局管理器或锚点（anchors）来定位和调整。
Item适合将其作为基础父元素，来构建复杂的用户界面组件和布局，当你需要将多个元素组合在一起形成一个新的可视元素时，Item 是一个很好的选择；
可以用于自定义控件的创建，将多个可视元素封装在一起，实现可复用的组件
像下面这个例子，Item 作为一个容器，包含了一个红色的矩形和一段蓝色的文本：

Item {width: 200; height: 200Rectangle {width: 100; height: 100; color: "red"}Text {text: "Hello, World"; color: "blue"}
}

Item与Window的区别：
Item与Window都可以作为基础父元素，但Window 是一个顶层窗口元素，用于创建应用程序的主窗口或对话框等；
Window 继承自Item，但除了继承 Item 的一些基本属性外，它还有一些专门针对窗口的属性，如 title（窗口标题）、flags（窗口标志，例如窗口是否可最小化、最大化等）、visibility（窗口的可见性）等；
Window提供了一个独立的窗口环境，可以设置窗口的各种属性，包括窗口的大小、位置、模态性等；
当你需要创建一个新的独立窗口，如主应用程序窗口、弹出窗口、对话框等，建议使用 Window；

Rectangle
当你需要绘制一个简单的矩形形状时，Rectangle 是最直接的选择；
可以作为基本的形状元素，用于 UI 界面的构建，如按钮、面板、背景等；
可以使用 Rectangle 来创建装饰性元素，如分割线、边框等，以增强 UI 的视觉效果；
也可以作为容器元素，Rectangle 可以将多个元素组合在一起，方便进行布局和管理。它可以用来创建一个分组的 UI 区域，将相关元素放在一起；
也可作为自定义组件的基础元素，通过添加多个子元素和属性，实现自定义的复杂组件；
例如下面这样：

//作为一个容器元素，包含一个图片和文本
Rectangle1 {width: 250; height: 150; color: "white"border.color: "gray"; border.width: 1;Image {source: "image.jpg";anchors.left: parent.left; anchors.top: parent.top;anchors.margins: 10}Text {text: "This is Image";anchors.left: parent.left; anchors.bottom: parent.bottom;anchors.margins: 10}
}
//作为自定义组件的基础元素使用
Rectangle {width: 300; height: 200; color: "lightgray"property string titleText: "Panel Title"Rectangle {width: parent.width; height: 30; color: "darkgray"Text {text: parent.titleText;anchors.centerIn: parent}}// 更多子元素可以添加在这里
}
//当成一个分割线使用
Rectangle3 {width: parent.width; height: 2; color: "gray"anchors.top: parent.top; anchors.left: parent.left
}

MouseArea
MouseArea 提供一系列触摸事件，它是一个不可见的项目，通常与可见项目组合实现界面交互。
属性
1）mouseX：real
2）mouseY：real
3）enabled：bool
4）pressed：bool
5）propagateComposedEvents：bool
信号
1）clicked（MouseEvent mouse）：单击
2）pressed（MouseEvent mouse）：按下
3）released（MouseEvent mouse）：松开
4）positionChanged（MouseEvent mouse）：鼠标移动（x、y）
5）doubleClicked（MouseEvent mouse）：双击
6）pressAndHold（MouseEvent mouse）：长按，按下达到一定时间才会激发
7）wheel（WheelEvent wheel）：滚轮

// 代码示例 1
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12Window {width: 640height: 480visible: truetitle: qsTr("Hello World")MouseArea {anchors.fill: parentpressAndHoldInterval: 2000  // 按住间隔设置为2s，单位是ms// 按下onPressed: {console.log("按下：onPressed")}// 释放（松开）onReleased: {console.log("释放：onReleased")}// 点击onClicked: {console.log("点击：onClicked")}// 长按onPressAndHold: {console.log("长按：onPressAndHold")}// 双击onDoubleClicked: {console.log("双击：onDoubleClicked")}// 坐标移动onPositionChanged: {console.log(mouseX, mouseY)}}
}