Qml 實現星級評分元件 已釋出

梦起丶發表於2024-09-15
元件

【寫在前面】

在現代應用程式中，星級評分是一個常見的使用者介面元素，它允許使用者對產品、服務或內容進行評價。

想必大家在用各種帶有評分的軟體中看到過這個元件：

image

本文將指導你如何使用 Qml 建立一個簡單而美觀的星級評分元件，並且支援高度自定義。

【正文開始】

先來看看效果圖：

image

現在開始講解思路：

首先，我們需要考慮半星的情況，因此可以分為三個部分：

image

1、紅色部分：滿填充星星【fillDelegate】。

2、綠色部分：半填充星星【halfDelegate】。

3、藍色部分：無填充星星【emptyDelegate】。

這三部分都是透過代理實現的，因此如果需要自定義，則必須提供這三個元件：

    property Component fillDelegate: Component {
        Text {
            text: fillIcon
            color: root.iconColor
            font.family: fontAwesome.name
            font.pixelSize: iconFontSize
        }
    }
    property Component emptyDelegate: Component {
        Text {
            text: emptyIcon
            color: root.iconColor
            font.family: fontAwesome.name
            font.pixelSize: iconFontSize
        }
    }
    property Component halfDelegate: Component {
        Text {
            text: halfIcon
            color: root.iconColor
            font.family: fontAwesome.name
            font.pixelSize: iconFontSize
        }
    }

接下來，我們需要計算每個部分的數量，其中半星必然只有一顆( 如果有 )：

    property int fillCount: Math.floor(root.value)
    property int emptyStartIndex: Math.round(root.value)
    property bool hasHalf: root.value - fillCount > 0

然後用 Repeater + Loader 載入即可：

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

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

            Loader {
                active: index < repeater.fillCount
                sourceComponent: fillDelegate
                property bool hovered: rootItem.hovered
            }

            Loader {
                active: repeater.hasHalf && index === (repeater.emptyStartIndex - 1)
                sourceComponent: halfDelegate
                property bool hovered: rootItem.hovered
            }

            Loader {
                active: index >= repeater.emptyStartIndex
                sourceComponent: emptyDelegate
                property bool hovered: rootItem.hovered
            }
        }

        property int fillCount: Math.floor(root.value)
        property int emptyStartIndex: Math.round(root.value)
        property bool hasHalf: root.value - fillCount > 0
    }

至此，核心部分講解完了，其他部分直接看原始碼即可。

【結語】

最後：專案連結(多多star呀..⭐_⭐)：

Github 地址：https://github.com/mengps/QmlControls/tree/master/Rate

相關文章