限制QML TextField长度致多字节字符截断的简便解决办法咨询

问题原因 #

TextField的maximumLength属性是按UTF-16代码单元计数的，而像😊这类补充平面的Unicode字符需要用两个UTF-16代码单元（代理对）表示。当已有15个单代码单元字符时，输入该表情会使总代码单元数达到17，超过16的限制，TextField会直接截断最后一个代码单元，破坏代理对结构，最终显示为�。

简便解决方法（纯QML实现） #

不需要依赖ICU或自定义QValidator，直接在onTextChanged事件中手动计算Unicode字符数（每个表情算1个），并在超过限制时截断到完整的字符：

TextField {
    id: myTextField

    onTextChanged: {
        let codePointCount = 0;
        let index = 0;
        // 统计当前文本的Unicode字符数
        while (index < text.length) {
            const charCode = text.charCodeAt(index);
            // 判断是否为UTF-16高代理项，是则跳过两个单元
            index += (charCode >= 0xD800 && charCode <= 0xDBFF) ? 2 : 1;
            codePointCount++;
        }

        // 超过限制则截断
        if (codePointCount > 16) {
            let truncatedText = "";
            let count = 0;
            index = 0;
            while (index < text.length && count < 16) {
                const charCode = text.charCodeAt(index);
                if (charCode >= 0xD800 && charCode <= 0xDBFF) {
                    truncatedText += text[index] + text[index + 1];
                    index += 2;
                } else {
                    truncatedText += text[index];
                    index += 1;
                }
                count++;
            }
            // 避免递归触发onTextChanged
            if (truncatedText !== text) {
                text = truncatedText;
            }
        }
    }
}

替代方案（C++辅助） #

如果需要更高效的处理，可以在C++中实现辅助函数，利用Qt的QTextBoundaryFinder处理Unicode字符边界，再通过Q_INVOKABLE暴露给QML调用：

#include <QString>
#include <QTextBoundaryFinder>

Q_INVOKABLE QString truncateToUnicodeCharCount(const QString &text, int maxCount) {
    if (maxCount <= 0) return "";
    QTextBoundaryFinder finder(QTextBoundaryFinder::Grapheme, text.constData(), text.length());
    int count = 0;
    int pos = 0;
    while (finder.toNextBoundary() != -1 && count < maxCount) {
        pos = finder.position();
        count++;
    }
    return text.left(pos);
}

在QML中注册该辅助类后，即可直接调用：

TextField {
    id: myTextField
    onTextChanged: {
        text = MyHelper.truncateToUnicodeCharCount(text, 16);
    }
}

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