Qt QML SpinBox自定义TextInput：实现固定后缀的可编辑数值输入

核心思路 #

要实现"当前值 / 最大值 pc."的显示效果，且仅允许修改"/"前的数字，需要做到两点：

• 显示完整格式的字符串，同时在编辑时自动保留后缀部分
• 限制输入内容为合法数字，且数值范围在1到maxValue之间

完整实现代码 #

SpinBox {
    property int maxValue: 20 // 可自定义最大值

    id: spin
    from: 1
    to: maxValue
    editable: true
    value: 1

    // 自定义内容项：实现带固定后缀的输入
    contentItem: TextInput {
        id: input
        text: `${spin.value} / ${spin.maxValue} pc.`
        horizontalAlignment: Qt.AlignHCenter
        verticalAlignment: Qt.AlignVCenter
        font: spin.font
        inputMethodHints: Qt.ImhDigitsOnly

        // 监听文本变化，提取有效数字并恢复后缀
        onTextChanged: {
            // 提取"/"前的数字部分
            const match = text.match(/^(\d+)/);
            if (match) {
                const inputValue = parseInt(match[1], 10);
                // 确保数值在合法范围内
                spin.value = Math.max(spin.from, Math.min(spin.to, inputValue));
            }
            // 强制恢复完整格式，防止后缀被修改
            text = `${spin.value} / ${spin.maxValue} pc.`;
        }

        // 设置验证器，仅允许数字开头的输入（配合上面的文本恢复逻辑）
        validator: RegularExpressionValidator {
            regularExpression: /^\d*$/ // 允许输入空或数字，后续会被格式化为合法值
        }
    }

    // SpinBox自身的数值验证器，确保value始终在范围内
    validator: IntValidator {
        bottom: spin.from
        top: spin.to
    }
}

关键细节说明 #

• 文本格式化与恢复：通过onTextChanged事件，用正则表达式提取输入的数字部分，将其转换为合法数值后更新SpinBox的value，再强制将文本重置为完整格式，这样用户无法修改后缀部分
• 输入限制：inputMethodHints: Qt.ImhDigitsOnly限制输入法仅输入数字，配合正则验证器确保输入内容为数字，避免非法字符
• 数值范围控制：通过SpinBox自身的IntValidator和文本处理时的Math.max/min，保证最终数值始终在1到maxValue之间

为什么不用inputMask？ #

inputMask适合固定格式的输入（如固定位数的号码），但你的场景中maxValue是可变的，后缀长度不固定，无法用固定掩码匹配任意位数的最大值，因此正则+文本恢复的方案更灵活可靠。

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