Qml 实现星级评分组件

【写在前面】

在现代应用程序中，星级评分是一个常见的用户界面元素，它允许用户对产品、服务或内容进行评价。
想必大家在用各种带有评分的软件中看到过这个组件：

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

先来看看效果图：

现在开始讲解思路：
首先，我们需要考虑半星的情况，因此可以分为三个部分：

1、红色部分：满填充星星【fillDelegate】。
2、绿色部分：半填充星星【halfDelegate】。
3、蓝色部分：无填充星星【emptyDelegate】。
这三部分都是通过代理实现的，因此如果需要自定义，则必须提供这三个组件：

1.     property Component fillDelegate: Component {
2.         Text {
3.             text: fillIcon
4.             color: root.iconColor
5.             font.family: fontAwesome.name
6.             font.pixelSize: iconFontSize
7.         }
8.     }
9.     property Component emptyDelegate: Component {
10.         Text {
11.             text: emptyIcon
12.             color: root.iconColor
13.             font.family: fontAwesome.name
14.             font.pixelSize: iconFontSize
15.         }
16.     }
17.     property Component halfDelegate: Component {
18.         Text {
19.             text: halfIcon
20.             color: root.iconColor
21.             font.family: fontAwesome.name
22.             font.pixelSize: iconFontSize
23.         }
24.     }

复制代码

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

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

复制代码

然后用 Repeater + Loader 载入即可：

1.     Repeater {
2.         id: repeater
3.         model: root.count
4.         delegate: MouseArea {
5.             id: rootItem
6.             width: root.iconSize
7.             height: root.iconSize
8.             hoverEnabled: true
9.             onEntered: hovered = true;
10.             onExited: hovered = false;
11.             onClicked: {
12.                 root.isDone = !root.isDone;
13.                 if (root.isDone) {
14.                     __private.doneValue = root.value;
15.                     root.done(__private.doneValue);
16.                 }
17.             }
18.             onPositionChanged: function(mouse) {
19.                 if (root.allowHalf) {
20.                     if (mouse.x > (width * 0.5)) {
21.                         root.value = index + 1;
22.                     } else {
23.                         root.value = index + 0.5;
24.                     }
26.                 } else {
27.                     root.value = index + 1;
28.                 }
29.             }
30.             property bool hovered: false
32.             Loader {
33.                 active: index < repeater.fillCount
34.                 sourceComponent: fillDelegate
35.                 property bool hovered: rootItem.hovered
36.             }
38.             Loader {
39.                 active: repeater.hasHalf && index === (repeater.emptyStartIndex - 1)
40.                 sourceComponent: halfDelegate
41.                 property bool hovered: rootItem.hovered
42.             }
44.             Loader {
45.                 active: index >= repeater.emptyStartIndex
46.                 sourceComponent: emptyDelegate
47.                 property bool hovered: rootItem.hovered
48.             }
49.         }
51.         property int fillCount: Math.floor(root.value)
52.         property int emptyStartIndex: Math.round(root.value)
53.         property bool hasHalf: root.value - fillCount > 0
54.     }

复制代码

至此，核心部分讲解完了，其他部分直接看源码即可。
【结语】

最后：项目链接(多多star呀..⭐_⭐)：
Github 地址：https://github.com/mengps/QmlControls/tree/master/Rate

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！