Why doesn't anchor work?

Question

User interface

Hello! There is some QML code:

// main.qml

import QtQuick 2.0
import QtQuick.Window 2.0

Window {
    visible: true;
    width: 800
    height: 600
    Temperature {
        id: temp
        value: 15
        min: 10
        max: 20
        anchors.centerIn: parent
    }
    Temperature {
        id: temp2
        value: 20
        min: 10
        max: 20
        anchors.left: temp.right
    }
}

//Temperature.qml
import QtQuick 2.0

Rectangle {
    property real value: 0
    property real min: 0
    property real max: 0
    readonly property bool belowMin: (min != max) ? (value < min) : false
    readonly property bool aboveMax: (min != max) ? (value > max) : false
    readonly property bool normal: (min != max) ? ((value >= min) && (value <= max)) : true

    Rectangle {
        id: display
        width: 40
        height: 20
        border.width: 1
        color: (normal) ? "lightgreen" : ((belowMin) ? "grey" : "red")
        Text {
            anchors.centerIn: parent
            text: value;
            font.pixelSize: parent.width * 0.3;
        }
    }
    Image {
        width: display.width * 0.5
        anchors.top: display.bottom
        anchors.horizontalCenter: display.horizontalCenter
        source: "qrc:/images/temperature.png"
        fillMode: Image.PreserveAspectFit
    }
}

For some reason, the result of executing the code does not match the code, because, judging by the line anchors.left: temp.right , the second Temperature object should be to the left of the first object.
Please tell me what is the problem? I can't find an answer at all.

Answer 1

For vertical and horizontal alignment use
https://doc-snapshots.qt.io/qt5-5.9/qml-qtquick-ro...
https://doc-snapshots.qt.io/qt5-5.9/qml-qtquick- co...
they are more convenient
Temperature.qml
instead of the root Rectangle use Column
anchors.top: display.bottom remove

Temperature {
        id: temp
        value: 15
        min: 10
        max: 20
        anchors.centerIn: parent
    }
    Temperature {
        id: temp2
        value: 20
        min: 10
        max: 20
        anchors.left: temp.right
    }

wrap in Row anchors remove completely. And center the Row itself

Answer 2

Here the anchor is missing perhaps:
Temperature {
id: temp2
value: 20
min: 10
max: 20
anchors.left: temp.right
anchors.top: temp.top
}