如何在QML TextArea中实现类似iPhone长按空格键的光标控制？

完全可以在QML TextArea中实现类似iPhone的长按空格操控光标功能，核心思路是通过监听长按事件、自定义光标、跟踪触摸/鼠标移动来控制TextArea的光标位置，具体实现步骤如下：

• 监听长按触发时机：利用TextArea的pressAndHold信号，结合对点击位置字符的判断（确认长按的是空格），触发光标拖拽模式。
• 切换到拖拽交互模式：长按触发后，隐藏TextArea默认光标，创建一个自定义的高亮光标（类似iPhone的大光标），同时临时将TextArea设为只读，避免拖拽时误输入。
• 跟踪移动控制光标：通过MouseArea监听触摸/鼠标的位置变化，调用TextArea的positionAt()方法将坐标转换为文本光标位置，同步更新自定义光标和TextArea的cursorPosition。
• 结束拖拽恢复正常：松开触摸/鼠标后，销毁自定义光标，取消TextArea的只读状态，恢复默认输入模式。

简化实现示例 #

TextArea {
    id: textArea
    anchors.fill: parent
    wrapMode: Text.Wrap
    font.pixelSize: 16

    property bool isDraggingCursor: false
    property Rectangle customCursor: null

    // 长按触发拖拽模式
    onPressAndHold: {
        // 获取长按位置对应的字符，判断是否为空格
        const pressPos = textArea.positionAt(mouseX, mouseY)
        if (pressPos > 0 && textArea.text.charAt(pressPos - 1) === " ") {
            isDraggingCursor = true
            // 创建自定义光标
            customCursor = Rectangle {
                parent: textArea
                width: 3
                height: textArea.font.pixelSize + 4
                color: "#007AFF"
                radius: 1
                x: textArea.cursorRectangle.x
                y: textArea.cursorRectangle.y - 2
            }
            textArea.readOnly = true
        }
    }

    // 监听拖拽过程中的位置变化
    MouseArea {
        anchors.fill: parent
        enabled: textArea.isDraggingCursor
        onMouseXChanged: {
            const newPos = textArea.positionAt(mouseX, mouseY)
            if (newPos !== undefined) {
                textArea.cursorPosition = newPos
                customCursor.x = textArea.cursorRectangle.x
            }
        }
        onReleased: {
            isDraggingCursor = false
            customCursor?.destroy()
            textArea.readOnly = false
        }
    }
}

优化方向 #

• 针对触摸设备优化：增加触摸事件的支持，确保在手机等触摸设备上的流畅度。
• 光标样式优化：调整自定义光标的大小、动画效果，更贴近iPhone的视觉体验。
• 边界处理：限制光标移动范围，避免超出文本内容区域。

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