目录拆开讲讲形状变化图标按索引排先后受限于 SVG 描边色几个可以调的参数什么时候用小结完整代码工程下载本文介绍 QML 自定义的浮动胶囊组件。如图所示：思路很简单：整个展开还是收起，只由一个开关状态决定。这一个状态一变，圆钮的形状、每个图标的显隐就全部跟着变，不用去把每个动画单独安排时间。拆开讲讲下面是逐段讲解，完整代码放在文章末尾的「完整代码」里。整个浮动胶囊就四块，一块一块说。形状变化胶囊本体是矩形，依靠宽度和圆角实现形态切换。收起时宽度等于圆按钮直径，圆角取半宽，外观为圆形按钮。展开进度绑定动画，宽度随进度同步产生过冲。圆角使用独立动画对数值二次平滑，变化更稳定。两组动画分别管控属性，不共用一套动画。回弹幅度不宜过大，宽度过冲太大会造成外形晃动。展开宽度由内部布局尺寸累加算出，改动图标数量或槽位尺寸，宽度自动重算，无需手动调参。// 0 = 收起（圆形 FAB），1 = 展开（胶囊工具栏）—— 单一驱动属性 property real expanded: 0 Behavior on expanded { NumberAnimation { duration: 360; easing.type: Easing.OutBack; easing.overshoot: 1.02 } } Rectangle { clip: tru