目录
-
- 拆开讲讲
-
- 落点由三角函数算出
- 看不见不等于点不到
- 按钮按索引先后弹出
- 投影的实现方式
- 几个可以调的参数
- 什么时候用
- 小结
- 完整代码
- 工程下载
本文介绍 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
