【QT Quick】页面布局：手动定位与坐标系转换

在这篇教程中，我们将详细介绍在 QT Quick 中如何手动定位元素以及坐标系转换的概念和应用。手动定位不仅仅是指定 x、y 坐标，更涉及坐标系的管理。我们会从最基本的手动定位开始，逐步扩展到更复杂的坐标系转换操作。

坐标系

默认坐标系：QT Quick 中的默认坐标系是相对于左上角的 (0, 0)，x 轴向右增长，y 轴向下增长。
Z 轴控制层级：除了 x 和 y 轴，z 轴用于控制元素的前后层级。层次控制可以通过元素的代码顺序，或者直接设定 z 属性来调整元素的显示层次。

基本手动定位

在这个部分，我们通过创建两个矩形来演示手动定位。我们将分别设置这两个矩形的位置，并通过 z 属性控制它们的层次关系。

import QtQuick 2.15
import QtQuick.Controls 2.15ApplicationWindow {visible: truewidth: 400height: 400title: "QT Quick 手动定位示例"Rectangle {id: rect1width: 200height: 200color: "blue"x: 50y: 50z: 1 // 确保这个矩形在另一个矩形上面}Rectangle {id: rect2width: 200height: 200color: "red"x: 100y: 100z: -1 // 放在底层}
}

rect1：蓝色矩形，位置为 (50, 50)，层次设置为 z: 1，确保它显示在 rect2 之上。
rect2：红色矩形，位置为 (100, 100)，层次设置为 z: -1，确保它显示在 rect1 之下。

通过调整 z 值，可以控制它们的层次关系，即使它们的 x 和 y 坐标有重叠。

坐标系转换

在实际应用中，当你需要根据父子关系动态设置元素的位置时，通常会遇到不同坐标系的问题。QT Quick 提供了一些方法来处理这些坐标系的转换，包括 mapToItem() 和 mapFromItem() 函数。我们将演示如何将鼠标点击的位置转换到某个元素的局部坐标系中。

`mapToItem()`

功能：将当前元素的坐标转换为目标元素的坐标系中的坐标。
参数：
- targetItem：要转换到的目标元素。
- x：要转换的 x 坐标。
- y：要转换的 y 坐标。
返回值：返回一个 Qt.point 对象，包含转换后的 x 和 y 坐标。

Rectangle {id: rect1width: 300height: 300color: "blue"Rectangle {id: rect2width: 50height: 50color: "red"x: 0y: 0}MouseArea {anchors.fill: parentonClicked: {var globalPos = mapToItem(rect1, mouse.x, mouse.y);console.log("Mouse position in rect1:", globalPos.x, globalPos.y);}}
}

在这个示例中，mapToItem(rect1, mouse.x, mouse.y) 将鼠标点击位置转换为相对于 rect1 的坐标。

`mapFromItem()`

功能：将目标元素的坐标转换为当前元素的坐标系中的坐标。
参数：
- sourceItem：要转换的源元素。
- x：要转换的 x 坐标。
- y：要转换的 y 坐标。
返回值：返回一个 Qt.point 对象，包含转换后的 x 和 y 坐标。

Rectangle {id: rect1width: 300height: 300color: "blue"Rectangle {id: rect2width: 50height: 50color: "red"x: 0y: 0}MouseArea {anchors.fill: parentonClicked: {var posInRect1 = mapFromItem(rect1, mouse.x, mouse.y);console.log("Mouse position in rect1 relative to rect2:", rect2.mapFromItem(rect1, posInRect1.x, posInRect1.y));}}
}

在这个示例中，mapFromItem(rect1, mouse.x, mouse.y) 将鼠标点击位置转换为相对于 rect1 的坐标，然后使用 rect2.mapFromItem() 将该坐标转换为 rect2 的坐标系。