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

本文链接：https://blog.csdn.net/2303_80346267/article/details/142795347

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

坐标系

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

基本手动定位

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

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 400
    height: 400
    title: "QT Quick 手动定位示例"

    Rectangle {
        id: rect1
        width: 200
        height: 200
        color: "blue"
        x: 50
        y: 50
        z: 1 // 确保这个矩形在另一个矩形上面
    }

    Rectangle {
        id: rect2
        width: 200
        height: 200
        color: "red"
        x: 100
        y: 100
        z: -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: rect1
    width: 300
    height: 300
    color: "blue"

    Rectangle {
        id: rect2
        width: 50
        height: 50
        color: "red"
        x: 0
        y: 0
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            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: rect1
    width: 300
    height: 300
    color: "blue"

    Rectangle {
        id: rect2
        width: 50
        height: 50
        color: "red"
        x: 0
        y: 0
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            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 的坐标系。