首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

Qml 实现星级评分组件 已发布

编程知识
2024年09月15日 16:07

【写在前面】

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

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

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

From:https://www.cnblogs.com/mengps/p/18415411
本文地址: http://www.shuzixingkong.net/article/2046
0评论
提交 加载更多评论
其他文章 计算机执行汇编代码的原理
计算机执行汇编代码的原理 汇编语言(Assembly Language)是一种低级编程语言,它与机器语言(Machine Language)密切相关。汇编语言由人类可读的指令构成,这些指令会被转化为机器可以理解的二进制代码,即机器码。本文将介绍计算机如何执行汇编代码的基本原理,并通过图文说明帮助理解
计算机执行汇编代码的原理 计算机执行汇编代码的原理 计算机执行汇编代码的原理
十三,Spring Boot 中注入 Servlet,Filter,Listener
十三,Spring Boot 中注入 Servlet,Filter,Listener @目录十三,Spring Boot 中注入 Servlet,Filter,Listener1. 基本介绍2. 第一种方式:使用注解方式注入:Servlet,Filter,Listener2.1 使用注解方式注入:S
十三,Spring Boot 中注入 Servlet,Filter,Listener 十三,Spring Boot 中注入 Servlet,Filter,Listener 十三,Spring Boot 中注入 Servlet,Filter,Listener
MonoDevelop 的续集dotdevelop
DotDevelop 是一个跨平台的 .NET 集成开发环境(IDE),它原本是 MonoDevelop 的分支项目,这个项目更侧重于 Linux 支持和 GTK3 升级,github:https://github.com/dotdevelop/dotdevelop。MonoDevelop 是一个开
manim边学边做--弧形多边形
弧形多边形是一种结合了圆弧和多边形的图形,这类几何图形在设计中应用非常广泛。 比如在家居设计中,看看家里的沙发,餐桌和座椅等,它们的边角,靠背等地方都是弧形的设计,这种设计有效柔化了室内空间,使整体氛围更加和谐自然。 还有景观和建筑设计中,弧形多边形常被用于道路规划、花坛布局等, 特别是儿童游乐的区
manim边学边做--弧形多边形 manim边学边做--弧形多边形 manim边学边做--弧形多边形
代码整洁之道--读书笔记(10)
代码整洁之道 简介: 本书是编程大师“Bob 大叔”40余年编程生涯的心得体会的总结,讲解要成为真正专业的程序员需要具备什么样的态度,需要遵循什么样的原则,需要采取什么样的行动。作者以自己以及身边的同事走过的弯路、犯过的错误为例,意在为后来者引路,助其职业生涯迈上更高台阶。 本书适合所有程序员阅读,
代码整洁之道--读书笔记(10) 代码整洁之道--读书笔记(10)
Go runtime 调度器精讲(七):案例分析
原创文章,欢迎转载,转载请注明出处,谢谢。 0. 前言 前面用了六讲介绍 Go runtime 调度器,这一讲我们看一个关于调度 goroutine 的程序案例分析下调度器做了什么。需要说明的是,这个程序和抢占有关,抢占目前为止还没有介绍到,如果看不懂也没有关系,有个印象就行。 1. 案例 1 执行
C++中对象的延迟构造
本文并不讨论“延迟初始化”或者是“懒加载的单例”那样的东西,本文要讨论的是分配某一类型所需的空间后不对类型进行构造(即对象的lifetime没有开始),更通俗点说,就是跳过对象的构造函数执行。 使用场景 我们知道,不管是定义某个类型的对象还是用operator new申请内存,对象的构造函数都是会立
C++中对象的延迟构造 C++中对象的延迟构造 C++中对象的延迟构造
Git冲突解决技巧
在多人协作的软件开发项目中,Git 冲突是不可避免的现象。当两个或更多的开发者同时修改了同一段代码,并且尝试将这些修改合并到一起时,冲突就发生了。解决这些冲突是确保代码库健康和项目顺利进行的关键。
Git冲突解决技巧