QML 自定义 TabBar：梯形标签

目录

• • 拆开讲讲
  • • 梯形用路径描
    • 形状填渐变的坑
    • 无缝咬合的那块缺口
  • 几个可以调的参数
  • 什么时候用
  • 小结
  • 完整代码
  • 工程下载

本文介绍 QML 自定义的梯形标签组件，如图所示：

拆开讲讲

下面是逐段讲解，完整代码放在文章末尾的「完整代码」里。整个梯形标签就四块，一块一块说。

梯形用路径描

每个标签是 Repeater 的一个条目，图形由 Shape 节点绘制。它的纵向位置绑在「父行高减自身高度」上，高度即标签当前高度；选中与未选中高度不同，但所有标签底边对齐在同一条线上。

梯形轮廓在形状路径里一笔画成：从左下角直线走到左上切点，用二次曲线把顶角圆过去，横拉顶部，右边对称处理后回到底边闭合。切点坐标由斜切深度、圆角半径和当前标签高度派生，保证斜切与圆角接缝吻合。这里有个几何要点：切点是按比例投影到斜边上的，所以改标签高度时切点会自动跟随，不用手动重算。

property real tabH: isSelected ? 42 : 34 // 选中/未选中两个高度，底边对齐同一条线
property real slant: 9 // 斜切深度
property real corner: 6 // 顶角圆角半径
readonly property real slantLen: Math.sqrt(slant*slant