QML矩形对象放在错误的位置

Question

我只是试图创建4个矩形，彼此相邻，并且3个相邻，第4个矩形位于第3个矩形下方，而我的qml如下所示

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Rectangle")

    Item{
        anchors.centerIn: parent
        Rectangle {
            id: firstRect
            width:50
            height:50
            color: "#ff0000"
        }
        Rectangle {
            id: secondRect
            width:firstRect.width
            height: firstRect.height
            color: "blue"
            //opacity: 0.5
            anchors.left: firstRect.right
        }
        Rectangle {
            id: thirdRect
            width:firstRect.width
            height: firstRect.height
            color: "green"
            //opacity: 0.5
            anchors.left: secondRect.right
        }
        Rectangle {
            id: fourthrect
            width:firstRect.width
            height: firstRect.height
            color: "green"
            //opacity: 0.5
            anchors.top: thirdRect.bottom
        }

    }
}

但是我的锚点为thirdRect.Bottom时，我却在第一个矩形下面得到了第四个矩形，如下所示：

Answer 1

就在附近，您很近。只需将其水平锚定在第三个矩形下即可。

Rectangle {
    id: fourthrect
    width:firstRect.width
    height: firstRect.height
    color: "green"

    anchors.top: thirdRect.bottom
    anchors.left: thirdRect.left     //  <-- this
}

请注意，假设第三个矩形和第四个矩形具有相同的宽度，则也可以使用anchors.right: thirdRect.right或anchors.horizontalCenter: thirdRect.horizontalCenter。

设置anchors.top: thirdRect.bottom仅会垂直地固定项目，而不会水平地固定项目。