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
        }

    }
}

但是我得到了第一个矩形下面的第 4 个矩形，如下所示，即使我的锚点是 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 只会垂直锚定项目，而不水平。

QML 矩形对象出现在错误的位置

QML Rectangle Object coming in wrong place

qml

qtquickcontrols