目录
- 先选方案
- 拆开讲讲
- 宽度是算出来的
- 文字宽度从 0 弹出来
- 三处动画收尾有先有后
- 几个可以调的参数
- 什么时候用
- 小结
- 完整代码
- 工程下载
本文介绍 QML 自定义的宽度形变组件。如图所示：
M3 Expressive 风格：平时只露小图标，选中项弹性展开成图标加文字，整排标签跟着弹簧重新分配位置。
先选方案
先定一个问题：标签宽度怎么定？为什么选中时才让它弹开，而不是全部等宽？
- 固定等宽：写死同一宽度，最省；整齐但呆板，适合条目多、要严格对齐的设置页。
- 随文字自适应：宽度绑 implicitWidth，便宜；紧凑自然，适合长短不一的桌面菜单，但性能差。
- 选中时形变动画：弹性宽度派生 + Behavior 里弹簧缓出，成本中等；像橡皮筋撑开、整排重排，适合手机底部导航、M3 Expressive 风格；条目一多重排就乱。
取舍一句话：用宽度动画的开销来换空间使用效率，代价是每次切换整排重排，条目多了会乱。所以它适合五个左右、平时只露图标的底部导航，不适合条目多、文字全程可见的菜单。具体选型见后面「什么时候用」对照表。
拆开讲讲
下面是逐段讲解，完整代码放在文章末尾的「完整代码」里。整个标签栏就四块，一块一块说。
先看一张时序表，把整段动画的骨架记在心里，再逐块拆：
| 步骤 | 动作 | <
|---|
