如何在Tumbler组件中为非当前项设置不同字体大小

要实现Tumbler中不同偏移量的项使用不同字体大小，核心是利用Tumbler代理组件提供的Tumbler.displacement属性——该属性代表当前项与选中项的位置偏移量（选中项的displacement为0，上下相邻项依次为±1、±2等），通过它动态计算字体大小即可。

方案1：线性缩放字体大小（随偏移量渐变） #

替换原代码中font.pixelSize的固定值，改为基于偏移量的动态计算，实现离选中项越远字体越小的渐变效果：

Component {
    id: delegateComponent

    Label {
        text: formatText(Tumbler.tumbler.count, modelData)
        opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        
        font.pixelSize: {
            // 基准字体大小（选中项的字体大小）
            const baseSize = fontMetrics.font.pixelSize * 1.25;
            // 最大偏移范围（可见项数的一半）
            const maxOffset = Tumbler.tumbler.visibleItemCount / 2;
            // 缩放比例：偏移量越大，字体缩小比例越高
            const scaleRatio = 1 - (Math.abs(Tumbler.displacement) / maxOffset) * 0.3;
            // 确保字体不小于基准大小的70%，避免过小
            return Math.max(baseSize * scaleRatio, baseSize * 0.7);
        }
    }
}

方案2：指定偏移量对应固定字体大小（精准控制） #

如果需要对特定偏移的项设置固定字体（比如选中项的相邻项用统一大小，更远的项用另一大小），可以用条件判断实现：

Component {
    id: delegateComponent

    Label {
        text: formatText(Tumbler.tumbler.count, modelData)
        opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        
        font.pixelSize: {
            const baseSize = fontMetrics.font.pixelSize * 1.25;
            const offset = Math.abs(Tumbler.displacement);
            if (offset === 0) {
                return baseSize;       // 选中项用基准大小
            } else if (offset === 1) {
                return baseSize * 0.9; // 相邻项缩小10%
            } else {
                return baseSize * 0.7; // 更远的项缩小30%
            }
        }
    }
}

关键参数说明 #

• Tumbler.displacement：当前项与选中项的位置差，选中项为0，向上每一项减1，向下每一项加1。
• baseSize：选中项的字体大小，可根据需求调整倍数（原代码中的1.25）。
• 缩放比例/条件判断中的数值：可根据视觉需求自行调整，比如把0.3改为0.4会让远项字体更小。

内容的提问来源于stack exchange，提问作者utkuyceng