Qml 实现星级评分组件 已发布
【写在前面】在当代应用程序中，星级评分是一个常见的用户界面元素，它允许用户对产品、服务或内容进行评价。
想必大家在用各种带有评分的软件中看到过这个组件：
https://img2024.cnblogs.com/blog/802097/202409/802097-20240915170523647-258250534.png
本文将引导你怎样使用 Qml 创建一个简单而美观的星级评分组件，并且支持高度自定义。
【正文开始】
先来看看结果图：
https://img2024.cnblogs.com/blog/802097/202409/802097-20240915170501926-368556080.gif
如今开始解说思路：
首先，我们需要考虑半星的情况，因此可以分为三个部门：
https://img2024.cnblogs.com/blog/802097/202409/802097-20240915170531683-219214693.png
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
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]