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

news2025/1/10 17:12:07

上一篇中我们从设计器里可以看到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: 200
    Rectangle {
        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.12
 
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
 
    MouseArea {
        anchors.fill: parent
        pressAndHoldInterval: 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)
        }
    }
}