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