QML 自定义 TabBar：浮动胶囊

目录

• • 拆开讲讲
  • • 形状变化
    • 图标按索引排先后
    • 受限于 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