Qt6.4 : Coloring Overlapping Stars with Texture or Color from Another Object

[CodyBoy]

Hello,

I am trying to fill an object with the texture or color of another object that overlaps it. To make it seem simpler, here is the code I have so far:

property double note: 3.67

Row {
            id: noteRow
            height: childrenRect.height
            width: childrenRect.width
            spacing: sp(10)
            anchors.horizontalCenter: parent.horizontalCenter

            Repeater {
                model: 5
                delegate: Item {
                    width: starIcon.width
                    height: starIcon.height

                    AppIcon {
                        id: starIcon
                        iconType: IconType.star
                    }

                    Rectangle {
                        id: redCover
                        width: starIcon.width
                        height: starIcon.height
                        color: "red"
                        visible: false
                    }

                    Component.onCompleted: {
                        let partialNote = Math.round(note * 2) / 2;
                        if (index + 1 <= Math.floor(partialNote)) {
                            redCover.visible = true;
                        } else if (index + 1 === Math.ceil(partialNote)) {
                            redCover.width = (partialNote - Math.floor(partialNote)) * starIcon.width;
                            redCover.visible = true;
                        }
                    }
                }
            }
        }

This code is used to color stars according to a rating that is assigned. However, the display shows this:

While I would like to have this:

I have done several searches and came across this link: https://stackoverflow.com/questions/66604044/qml-layer-element-reveals-element-above-it-when-they-overlap
But unfortunately, the solution provided didn't help me.
Searching further, I noticed that layer.effect could be a solution, so I did some research on this page: https://doc.qt.io/qt-6/qml-qtquick-shadereffect.html
But after trying the code provided on the page, nothing is displayed:

Rectangle {
    id: gradientRect;
    width: 10
    height: 10
    gradient: Gradient {
        GradientStop { position: 0; color: "white" }
        GradientStop { position: 1; color: "steelblue" }
    }
    visible: false; // should not be visible on screen.
    layer.enabled: true;
    layer.smooth: true
 }
 Text {
    id: textItem
    font.pixelSize: 48
    text: "Gradient Text"
    anchors.centerIn: parent
    layer.enabled: true
    // This item should be used as the 'mask'
    layer.samplerName: "maskSource"
    layer.effect: ShaderEffect {
        property var colorSource: gradientRect;
        fragmentShader: "mask.frag.qsb"
    }
}

So, do you have a solution to achieve coloring the stars as indicated above ?

Thank you in advance for your answers and have a great day