QML非可视控件

1.MouseArea

2.Keys

3.Timer

4.Loader

5.Component

1.MouseArea

MouseArea是一个用于处理鼠标事件的不可见组件，通常与可见的项目配合使用，为其提供鼠标交互功能。

属性：

enabled：用于设置是否启用鼠标处理，默认为true。
acceptedButtons：用于控制具体哪个或哪些鼠标按钮可以触发事件，默认为Qt.LeftButton。可以使用或运算符来指定多个按钮。
hoverEnabled：用于决定MouseArea是否接受悬停事件。如果设置为false，悬停事件将不会触发。
containsMouse：只读属性，表明当前是否有鼠标光标在MouseArea上。默认情况下，只有鼠标的一个按钮处于按下状态时才可以被检测到。
pressed：只读属性，表明是否用户在MouseArea按住了鼠标按钮，常用于属性绑定，可实现在鼠标按下时执行一些操作。

功能：

鼠标事件处理：MouseArea提供了多个信号来处理不同的鼠标事件，如onClicked()、onDoubleClicked()、onPressed()、onReleased()和onPressAndHold()等。这些信号可以连接到相应的槽函数，以执行特定的操作。
鼠标位置获取：在MouseEvent对象中，可以通过x和y属性获取鼠标的位置；通过button属性可以获取按下的按键；通过modifiers属性可以获取按下的键盘修饰符等。
拖拽功能实现：MouseArea中的drag分组属性提供了一个使项目可以拖拽的简便方法。可以通过设置drag.target属性来指定拖动的项目id；drag.active属性获取项目当前是否正在被拖动的信息；drag.axis属性用来指定属性的拖动方向；drag.minimum和drag.maximum限制了项目在指定方向上拖动的距离。
与其他组件结合使用：MouseArea可以与其他QML组件结合使用，如与Rectangle、Text等组合实现更复杂的界面布局和交互效果。例如，可以在Rectangle中添加MouseArea来实现点击、拖拽等交互功能。
动态更新属性：可以通过JavaScript代码在鼠标事件处理函数中动态地修改其他组件的属性，实现界面的动态更新。例如，在onClicked信号处理函数中修改Rectangle的颜色、大小等属性。

示例：

Rectangle {id: rect1anchors.centerIn: parentwidth: 100height: 100border.width: 2border.color: "black"color: {mouseArea.containsPress ? "blue" :mouseArea.containsMouse ? "red" : "transparent"}MouseArea {id: mouseAreaanchors.fill: parenthoverEnabled: true}
}Rectangle {anchors.top: rect1.bottomanchors.horizontalCenter: parent.horizontalCentercolor: "yellow"width: 100; height: 100MouseArea {anchors.fill: parentonClicked: console.log("clicked yellow")}Rectangle {color: "blue"width: 50; height: 50MouseArea {anchors.fill: parentpropagateComposedEvents: trueonClicked: (mouse)=> {console.log("clicked blue")mouse.accepted = false}}}
}

鼠标悬停在上面的矩形内部时变为红色，持续点击则变为蓝色；

鼠标点击下面矩形的蓝色部分时，会打印两条信息，这是由于鼠标穿透。

2.Keys

Keys是一个用于处理键盘事件的附加属性，主要用于处理按键事件。

属性：

enabled：用于设置是否启用键盘处理，默认为true。当设置为false时，当前QML对象将无法响应按键事件。
forwardTo：用于指定将键盘事件转发到的目标对象。可以将键盘事件转发到其他QML对象进行处理。
priority：用于设置键盘事件的优先级。可以通过设置不同的优先级来控制键盘事件的处理顺序。

功能：

按键事件处理：Keys提供了多个信号来处理不同的按键事件，如onPressed()、onReleased()、onClicked()等。这些信号可以连接到相应的槽函数，以执行特定的操作。
获取按键信息：在按键事件处理函数中，可以通过event参数获取按键的详细信息，如按键的键值、修饰键状态等。
组合按键检测：可以通过检测event.modifiers属性来判断是否有组合按键（如Ctrl+A）被按下。
与其他组件结合使用：Keys通常与其他QML组件（如Rectangle、Text等）结合使用，为这些组件提供键盘交互功能。例如，可以在Rectangle中添加Keys来实现对矩形的键盘控制。
动态更新属性：可以通过JavaScript代码在按键事件处理函数中动态地修改其他组件的属性，实现界面的动态更新。例如，在onPressed信号处理函数中修改Rectangle的颜色、大小等属性。

示例：

Item {anchors.centerIn: parentfocus: trueKeys.onSpacePressed: {console.log("1")}
}

RowLayout {anchors.fill: parentRectangle {id: rect1Layout.fillHeight: trueLayout.fillWidth: truecolor: "red"MouseArea {anchors.fill: parentonClicked: rect1.forceActiveFocus()}Keys.onPressed: {console.log("red")}}Rectangle {id: rect2Layout.fillHeight: trueLayout.fillWidth: truecolor: "blue"MouseArea {anchors.fill: parentonClicked: rect2.forceActiveFocus()}Keys.onPressed: {console.log("blue")}}
}

点击红色区域，按下任意按键，打印“red”；点击蓝色区域，按下任意按键，打印“blue”。

3.Timer

Timer是一个用于创建定时器的组件，用于在指定的时间间隔内执行或重复执行某个任务。

定时器属性：

interval：设置定时器的时间间隔，单位为毫秒，默认值为1000毫秒。
repeat：设置定时器是否重复触发，默认为false，即只触发一次。
running：设置定时器是否正在运行，默认为false。
triggeredOnStart：设置定时器是否在启动时立即触发，默认为false。

定时器信号：

triggered()：定时器触发时发出的信号，可以通过onTriggered属性来指定触发时执行的操作。

定时器方法：

start()：启动定时器，如果定时器已经在运行，则调用此方法无效。
restart()：重启定时器，如果定时器没有运行，它将被启动，否则它将重置到初始状态并启动。
stop()：停止定时器。

示例：

Label {id: labelanchors.centerIn: parenttext: Qt.formatDateTime(new Date, "yyyy-MM-dd hh:mm:ss")Timer {running: truerepeat: trueinterval: 1000onTriggered: {parent.text = Qt.formatDateTime(new Date, "yyyy-MM-dd hh:mm:ss")}}
}

每隔1秒触发一次定时器并刷新当前时间。

4.Loader

Loader是一个用于动态加载QML组件的元素。

属性：

source：用于指定要加载的QML文件的路径或URL。
sourceComponent：用于指定要加载的Component对象。
asynchronous：用于设置是否异步加载组件，默认为false。
item：用于访问加载的组件的顶层Item。
status：用于获取加载状态，可能的值包括Loader.Null、Loader.Ready、Loader.Loading和Loader.Error。
progress：用于获取加载进度，取值范围从0到1。

功能：

动态加载组件：Loader可以在运行时加载QML文件或Component对象，这对于延迟创建组件或根据需要加载组件非常有用。
切换页面或组件：通过改变source或sourceComponent属性，可以在不同的页面或组件之间切换。
接收加载组件的信号：可以使用Connections元素接收来自加载组件的信号。
处理焦点和键盘事件：Loader是一个焦点作用域，可以处理焦点和键盘事件，确保事件不传播到父项目。
获取加载状态和进度：可以通过status和progress属性获取加载状态和进度，以便在加载过程中提供反馈。
动态创建和销毁组件：Loader可以根据需要动态创建和销毁组件，提高应用程序的性能和资源利用率。

示例：

Component {id: compt_1Rectangle {color: "red"MouseArea {anchors.fill: parentonClicked: console.log(text_name)  //可以直接使用}}
}Component {id: compt_2Rectangle {color: "blue"}
}Row {Button {text: "red"onClicked: loader.sourceComponent = compt_1}Button {text: "blue"onClicked: loader.sourceComponent = compt_2}
}Loader {id: loaderanchors.centerIn: parentwidth: 200height: 200property string text_name : "loader"sourceComponent: compt_1
}

点击按钮，加载器会切换对应组件，点击红色区域会打印“loader”。

5.Component

Component是一种用于创建可重用的自定义组件的元素。

①status：这是一个反映组件状态的属性。

可能的取值有：

Component.Null：表示组件处于初始状态，还未进行加载或者创建相关操作。
Component.Loading：意味着组件正在加载或者创建的过程之中。
Component.Ready：表明组件已经准备好，可以用于创建实例等操作。
Component.Error：表示在组件的加载或者创建过程中发生了错误。

②createObject(parent)：用于创建组件的实例。

参数：需要传入一个父项（parent）作为参数，这个父项将成为创建出来的实例的父对象。

前提条件：在使用这个方法之前，通常需要先确保组件的status属性为Component.Ready，这样才能成功创建实例。

示例：

Item {anchors.fill: parentComponent {id: comptRectangle {width: 100height: 50border.width: 2border.color: "black"}}Column {id: colanchors.centerIn: parentwidth: children.widthheight: children.heightButton {text: "add rect"onClicked: compt.createObject(col, {})}}
}