如何避免QML自定义元素重叠？锚点使用问题排查

你的代码存在两个核心问题，直接导致了矩形重叠：

• 组件结构完全混乱：你把main.qml的容器代码直接嵌套进了CRect.qml里，这让CRect组件本身就包含了一个完整的容器结构，完全违背了自定义组件拆分的逻辑。正确的做法是CRect.qml只负责定义单个自定义矩形组件，入口逻辑单独放在main.qml中。

• 自定义组件尺寸未正确关联：CRect是Item类型，默认宽高为0。你内部的Rectangle没有和父Item做尺寸绑定或锚定，导致CRect本身的尺寸始终是0x0。当你在容器里使用两个CRect时，它们的默认位置都是容器左上角，自然会重叠。

CRect.qml #

import QtQuick 2.12

Item {
    property color bgColor: "red"
    // 绑定组件尺寸到内部矩形的尺寸
    width: rect.width
    height: rect.height

    Rectangle {
        id: rect
        width: 100
        height: 100
        color: bgColor
        // 填充整个父组件，确保内部矩形和组件尺寸一致
        anchors.fill: parent
    }
}

main.qml #

import QtQuick 2.12

Rectangle {
    id: containerId
    width: 300
    height: width
    border.color: "black"
    anchors.centerIn: parent

    CRect {
        id: topLeftRectId
    }

    CRect {
        id: topCenterRectId
        bgColor: "blue"
        anchors.left: topLeftRectId.right
    }
}

调整后两个自定义矩形会并排显示，不会再出现重叠。

内容的提问来源于stack exchange，提问作者Aman Kashyap