Basic QML object declaration syntax question

[Tom asso]

I often see QML with an object declaration prefixed by a lowercase name and colon.
E.g. the following example is from the QML Syntax Basics document:

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100

    gradient: Gradient {
        GradientStop { position: 0.0; color: "yellow" }
        GradientStop { position: 1.0; color: "green" }
    }
}

What is the lowercase "gradient" in relation to the Gradient? Is it the Gradient id property, or something else? That QML syntax document does not describe it.
Thanks!

[JonB]

@Tom-asso
I don't use QML, but while you wait for the correct terms from a QML-er it doesn't stop me answering :)

gradient is the name of a known property (also sometimes referred to as attributes or just plain members) of a Rectangle per https://doc.qt.io/qt-6/qml-qtquick-rectangle.html#properties. If you set such a property to a value then some internal QML code rendering the Rectangle looks at its value and acts on it appropriately. In this case, when it sees gradient it uses its value to render the Gradient. width and height are the same, they just happen to be inherited into a Rectangle per https://doc.qt.io/qt-6/qml-qtquick-rectangle-members.html from https://doc.qt.io/qt-6/qml-qtquick-item.html. If you didn't write gradient: somewhere it would not know you are trying to set the gradient, just as if you didn't write width: it wouldn't know you were setting the width. And same for position: or color: in GradientStop. The others have "simpler" values like numbers or strings, while gradient has a more complex Gradient object as its value, but it's all the same thing/syntax.

[Tom asso]

@JonB Oh, that makes total sense! Thanks!

[Sauntor]

This post is deleted!