QML component scope puzzle

Question

Take this code:

import QtQuick 1.1

Rectangle {
    width:  100
    height: 100

    property color fromColor: \"red\"
    property color toColor:   \"blue\"

           


        

Answer 1

This certainly doesn't look intuitive at first glance, but comment out fromColor and toColor in the component root item and the reason becomes apparent. From the QML Scope docs you can see that the scope includes:

• all of the id's defined within the Component.
• local properties
• the properties of the root object of the Component

A GradientStop {} in the example above has no local properties defined. The root component does, and they are the properties that fromColor and toColor resolve to. The properties in Gradient {} are not in the scope of the GradientStop {} at all.