ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

QML 自定义按钮:用着色器做鼠标跟随的光晕效果

2026/9/16 11:09:51 拓冰建站 浏览量
QML 自定义按钮:用着色器做鼠标跟随的光晕效果 目录最终效果拆开讲讲ShaderEffect 基本结构MouseArea 只追踪不拦截片元着色器几个可以调的参数什么时候用小结完整代码工程下载上一篇用分段动画做了果冻回弹,这篇换个完全不同的思路,用ShaderEffect自定义片元着色器,让按钮表面产生一个跟随鼠标位置移动的光晕。悬停时光晕渐入,按压时光晕增亮。所有像素级计算都在 GPU 上完成,性能不是问题。最终效果鼠标移到按钮上,光晕从鼠标位置渐入并跟随移动;按下去光晕增亮,按钮整体变亮。示例里两个按钮,一个蓝色光晕,一个紫色光晕更聚焦。拆开讲讲核心是ShaderEffect,QML 侧只负责传参数,shader 里算每个像素的颜色。ShaderEffect 基本结构按钮背景用ShaderEffect,定义几个 uniform 属性传给 shader。background: Item { ShaderEffect { id: haloShader anchors.fill: parent property color baseColor: "#1296FF" property real mouseX: 0.5