企业官网建设流程全解析

本文介绍 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