QML 自定义 TabBar：3D 翻转标签

目录

• • 最终效果
  • 先选方案
  • 拆开讲讲
  • • 翻的是内容区
    • 90° 是换内容的时机
    • 先把目标页暂存起来
    • 转完把角度归零
  • 几个可以调的参数
  • 什么时候用
  • 小结
  • 完整代码
  • 工程下载

本文介绍 QML 自定义的 3D 翻转标签组件。切换时把内容区当成一张卡片绕竖直中线旋转：先转到 90° 收成一条线，趁此时替换内容，再转回来露出新页面，转完手动把角度归零以恢复正面朝向。

最终效果

点标签，下面的内容卡片绕竖直中线转 180° 翻过去：先转 90° 变成一条线，趁这瞬间换掉内容，再转回来露出新页面。

先选方案

切入正题前，先回答一个绕不开的问题：内容区切换的方案多得很，为什么偏偏用 3D 翻转？

• 直接切换：成本最低，一行代码换索引；观感生硬但利落，适合高频切换的工具型界面，开销几乎为零。
• 淡入淡出：成本低，两个透明度动画；柔和但平淡，适合图文阅读、后台设置，性能很低。
• 滑动推入：成本中等，一个位移动画；顺畅有方向感，适合移动端内容流，性能低。
• 3D 翻转：成本较高，旋转加\”盲区换内容\”；仪式感最强，适合音乐切歌、相册翻页、卡牌展示；性能中等、内容越复杂越高。

3D 翻转的取舍一句话能说清：它拿\”半秒动画时间 + 一次旋转渲染\”的成本，换来别的方案给不了的仪式感。代价是频繁切换的界面会觉得拖沓，内容太复杂的卡片会掉帧。所以它适合\”偶尔切、慢慢切、切完停下来看\”的场景，不适合\”快速连点\”的场景。自己该选哪种，下面「什么时候用」里有对照表。

<