
目录最终效果先选方案拆开讲讲波纹层压在标签下面波纹圆只靠半径长大圆心要换算坐标系选中态那点弹簧几个可以调的参数什么时候用小结完整代码工程下载本文介绍 QML 自定义的波纹点击组件。那种点下去一圈涟漪从手指位置扩散开的效果,放在标签栏上就是:点哪个标签,波纹就从你点的那个位置冒出来,不是固定从中间。这种反馈比单纯变色更有存在感,系统级按钮和很多应用都在用。思路就是每次点都新画一个圆,圆心定在手指按下的地方,圆从小变大同时慢慢变淡,用完就把这个圆删掉。最终效果点标签时,一圈半透明蓝色波纹从你手指按下的位置扩散开,越扩越大、越变越淡,最后消失;选中文字放大、底部指示条弹出来。先选方案切入正题前,先回答一个绕不开的问题:点标签想给点反馈,除了变底色还有什么招?只变底色:成本最低,选中换个色就行;观感最素,适合工具型界面,开销几乎为零。闪光扫过:成本较高,要画一条高光斜着扫过;观感炫酷但偏花哨,适合品牌展示页,性能中等。整体缩放:成本低,点的时候标签整体 scale 压一下;观感 Q 弹但反馈点不在手指处,适合按钮按压,开销低。波纹扩散:成本中等,每次点现场建一个圆、半径从 0 长大到 120 同时变淡;观感跟手、从手指位置冒涟漪,适合 Material 风格移动端 tab,开销轻量。波纹扩散的取舍一句话能说清:它拿"每次点击现场建圆、用完再销毁"的成本,换来反馈从手指位置扩散、比变色更跟手的存