Qml implementation of star rating component Released

[Writing in front]

Star ratings are a common user interface element in modern applications that allow users to rate products, services, or content.

I'm sure you've seen this component in using various software with scoring:

This article will guide you on how to create a simple and aesthetically pleasing star rating component using Qml with high customization support.

---

[Text Begins]

Let's take a look at the effect first:

Now on to the ideas:

First, we need to consider the half-star case, which can therefore be divided into three parts:

1. Red section:Filled with stars【fillDelegate】。

2. Green section:Semi-filled stars【halfDelegate】。

3. Blue section:unfilled star【emptyDelegate】。

All three of these components are implemented through proxies, so if customization is required, these three components must be provided:

    property Component fillDelegate: Component {
        Text {
            text: fillIcon
            color: 
            : 
            : iconFontSize
        }
    }
    property Component emptyDelegate: Component {
        Text {
            text: emptyIcon
            color: 
            : 
            : iconFontSize
        }
    }
    property Component halfDelegate: Component {
        Text {
            text: halfIcon
            color: 
            : 
            : iconFontSize
        }
    }

Next, we need to count the number of each part where there is necessarily only one (if any) half star:

    property int fillCount: ()
    property int emptyStartIndex: ()
    property bool hasHalf:  - fillCount > 0

followed byRepeater + Loader Just load it:

    Repeater {
        id: repeater
        model: 
        delegate: MouseArea {
            id: rootItem
            width: 
            height: 
            hoverEnabled: true
            onEntered: hovered = true;
            onExited: hovered = false;
            onClicked: {
                 = !;
                if () {
                    __private.doneValue = ;
                    (__private.doneValue);
                }
            }
            onPositionChanged: function(mouse) {
                if () {
                    if ( > (width * 0.5)) {
                         = index + 1;
                    } else {
                         = index + 0.5;
                    }

                } else {
                     = index + 1;
                }
            }
            property bool hovered: false

            Loader {
                active: index < 
                sourceComponent: fillDelegate
                property bool hovered: 
            }

            Loader {
                active:  && index === ( - 1)
                sourceComponent: halfDelegate
                property bool hovered: 
            }

            Loader {
                active: index >= 
                sourceComponent: emptyDelegate
                property bool hovered: 
            }
        }

        property int fillCount: ()
        property int emptyStartIndex: ()
        property bool hasHalf:  - fillCount > 0
    }

At this point, the core part of the explanation is complete, the other parts of the direct look at the source code can be.

---

[Conclusion]

And finally: project link (more star yah...). ⭐_⭐):

Github Address:/mengps/QmlControls/tree/master/Rate