Qml 实现星级评分组件

【写在前面】

在现代应用程序中,星级评分是一个常见的用户界面元素,它允许用户对产品、服务或内容进行评价。

想必大家在用各种带有评分的软件中看到过这个组件:

本文将指导你如何使用 Qml 创建一个简单而美观的星级评分组件,并且支持高度自定义。


【正文开始】

先来看看效果图:

现在开始讲解思路:

首先,我们需要考虑半星的情况,因此可以分为三个部分:

1、红色部分:满填充星星 【fillDelegate】。

2、绿色部分:半填充星星 【halfDelegate】​​​​​​​。

2、蓝色部分:无填充星星 【emptyDelegate】​​​​​​​。

这三部分都是通过代理实现的,因此如果需要自定义,则必须提供这三个组件:

javascript 复制代码
    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
        }
    }

接下来,我们需要计算每个部分的数量,其中半星必然只有一颗( 如果有 ):

javascript 复制代码
    property int fillCount: Math.floor(root.value)
    property int emptyStartIndex: Math.round(root.value)
    property bool hasHalf: root.value - fillCount > 0

然后用 Repeater + Loader 载入即可:

javascript 复制代码
    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/Ratehttps://github.com/mengps/QmlControls/tree/master/Rate CSDN 的:
https://download.csdn.net/download/u011283226/89734737https://download.csdn.net/download/u011283226/89734737

相关推荐
机器视觉知识推荐、就业指导3 小时前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml
cooldream20096 小时前
深入理解MVP架构:让UI层与业务逻辑完美分离的设计模式
ui·设计模式·架构·系统架构师
拖孩6 小时前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
꧁坚持很酷꧂6 小时前
Linux Ubuntu18.04下安装Qt Craeator 5.12.9(图文详解)
linux·运维·qt
ChoSeitaku7 小时前
17.QT-Qt窗口-工具栏|状态栏|浮动窗口|设置停靠位置|设置浮动属性|设置移动属性|拉伸系数|添加控件(C++)
c++·qt·命令模式
OpenC++9 小时前
【C++QT】Buttons 按钮控件详解
c++·经验分享·qt·leetcode·microsoft
我真的不会C10 小时前
QT窗口相关控件及其属性
开发语言·qt
云小逸11 小时前
【QQMusic项目界面开发复习笔记】第二章
c++·qt
꧁坚持很酷꧂12 小时前
配置Ubuntu18.04中的Qt Creator为中文(图文详解)
开发语言·qt·ubuntu
sky_smile_Allen12 小时前
[Unity]-[UI]-[Prefab] 关于Unity UGUI 的布局及组件讲解
ui·unity·游戏引擎