ARTICLE DETAIL

建站实战干货

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

QML 自定义 TabBar:弧形菜单

2026/10/7 10:00:14 拓冰建站 浏览量
QML 自定义 TabBar:弧形菜单 目录拆开讲讲落点由三角函数算出看不见不等于点不到按钮按索引先后弹出投影的实现方式几个可以调的参数什么时候用小结完整代码工程下载本文介绍 QML 自定义的弧形菜单组件。点一下右下角的圆钮,几个常用操作像扇子一样沿着弧线一个个弹出来。如图所示:拆开讲讲下面是逐段讲解,完整代码放在文章末尾的「完整代码」里。整个弧形菜单就四块,一块一块说。落点由三角函数算出四个动作按钮不横向排布,各自独立定位在圆弧上。按钮按索引均分正上方至正左方的角度,构成主按钮左上方四分之一圆弧。位置通过正弦求横向偏移、余弦求纵向偏移,弧半径由展开进度乘以基准半径得到。以主按钮中心为原点,按角度偏移定位按钮中心。收起时进度为零,半径归零,按钮与主按钮中心重合。角度计算取数值与1的较大值避免除零,单按钮场景也可正常运行。// 弧线半径 readonly property real spread: 94 Repeater { model: page.actions delegate: Item { // 角度:0° = 正上方,90° = 正左方;Math.max(1, …) 防只有一个动作时除零 readonly property real ang: 90 * (index / Math.max(1, page.actions.length - 1)) readonly prop