QML TextInput在Android上选中文本时光标越界的修复咨询

问题背景 #

• 运行环境：Android 11/13（同版本系列其他系统大概率存在相同问题）
• 开发依赖：Qt 5.15.2、jdk-11.0.20.101、ndk-21.4.7075529

问题代码如下：

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 400
    height: 300
    visible: true

    Rectangle {
        anchors.centerIn: parent
        border.color: "black"
        width: 200
        height: 40
        
        TextInput {
            anchors.fill: parent
            clip: true
            cursorVisible: true
        }
    }
}

问题现象 #

在TextInput中输入超出其宽度的文本并全选时，光标会显示在TextInput的边界之外。

修复方案 #

方案1：滚动偏移控制 #

启用TextInput滚动功能，监听光标位置变化并调整滚动偏移，确保光标始终处于可视区域内：

TextInput {
    anchors.fill: parent
    clip: true
    cursorVisible: true
    scrollEnabled: true
    horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff // 隐藏滚动条保持界面简洁

    onCursorPositionChanged: {
        const cursorRect = cursorRectangle
        // 光标右侧超出控件宽度时调整滚动偏移
        if (cursorRect.x + cursorRect.width > width) {
            contentX = cursorRect.x + cursorRect.width - width
        }
        // 光标左侧超出可视区域时调整滚动偏移
        else if (cursorRect.x < 0) {
            contentX = cursorRect.x
        }
    }
}

方案2：自定义光标组件 #

替换默认光标为自定义矩形，通过坐标约束确保其始终在TextInput范围内：

TextInput {
    anchors.fill: parent
    clip: true
    cursorVisible: false // 隐藏默认光标

    // 自定义光标
    Rectangle {
        id: customCursor
        height: parent.font.pixelSize
        width: 2
        color: "black"
        visible: parent.activeFocus && parent.cursorVisible
        x: Math.max(0, Math.min(parent.width - width, parent.cursorRectangle.x - parent.contentX))
        y: parent.cursorRectangle.y - parent.contentY
    }
}

方案3：单行场景文本范围限制 #

如果是单行输入场景，可通过设置文本省略模式配合光标位置限制来解决：

TextInput {
    anchors.fill: parent
    clip: true
    cursorVisible: true
    wrapMode: TextInput.NoWrap
    elide: TextInput.ElideRight

    onCursorPositionChanged: {
        if (cursorPosition > visibleCharacters) {
            cursorPosition = visibleCharacters
        }
    }
}

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