Jetpack Compose处理软键盘事件：解决不可删除前缀光标偏移问题

你的ViewModel已经实现了前缀不可删除的逻辑，但光标位置异常和退格键的默认行为需要在Compose层面补充控制。下面是具体的解决方案：

1. 控制光标范围+监听退格键事件 #

通过OutlinedTextField的selection参数维护光标状态，同时用Modifier.onKeyEvent拦截退格键的不当触发，确保光标不会跑到前缀（"+"）前方：

@Composable
fun PhoneInputField(viewModel: PhoneViewModel, focusRequester: FocusRequester) {
    val phoneNumberState = viewModel.phoneNumber.collectAsState()
    // 初始光标固定在"+"后方（索引1的位置）
    val selectionState = remember { mutableStateOf(TextRange(1, 1)) }

    OutlinedTextField(
        modifier = Modifier
            .focusRequester(focusRequester)
            .onKeyEvent { event ->
                // 捕获退格键按下事件
                if (event.type == KeyEventType.KeyDown && event.key == Key.Backspace) {
                    val currentText = phoneNumberState.value
                    val currentCursorPos = selectionState.value.start
                    // 如果光标已经在"+"后方，拦截退格事件，避免光标前移
                    if (currentCursorPos <= 1 && currentText.startsWith("+")) {
                        return@onKeyEvent true
                    }
                }
                false // 其他事件正常传递
            },
        value = phoneNumberState.value,
        onValueChange = { newValue ->
            viewModel.onPhoneNumberChange(newValue)
            // 更新光标，确保不会跑到前缀前面
            selectionState.value = when {
                newValue.startsWith("+") && selectionState.value.start < 1 -> TextRange(1, 1)
                else -> selectionState.value
            }
        },
        label = { Text("phone number") },
        singleLine = true,
        // 限制光标选择范围，禁止选中前缀
        onSelectionChange = { newSelection ->
            val currentText = phoneNumberState.value
            selectionState.value = if (currentText.startsWith("+") && newSelection.start < 1) {
                TextRange(1, 1)
            } else {
                newSelection
            }
        },
        selection = selectionState.value
    )
}

2. 优化ViewModel逻辑（可选） #

增强ViewModel的文本处理逻辑，确保无论用户操作如何，文本始终以"+"开头：

class PhoneViewModel : ViewModel() {
    private val _phoneNumber = MutableStateFlow("+")
    val phoneNumber: StateFlow<String> = _phoneNumber
    private val phoneNumberMaxLength = 15 // 根据需求设置最大长度

    fun onPhoneNumberChange(value: String) {
        viewModelScope.launch {
            val processedValue = when {
                value.isEmpty() -> "+" // 避免文本变为空
                !value.startsWith("+") -> "+$value" // 自动补回被移除的前缀
                else -> value.take(phoneNumberMaxLength) // 限制长度
            }
            _phoneNumber.emit(processedValue)
        }
    }
}

核心逻辑说明 #

• 光标锁定：通过selection参数和onSelectionChange回调，强制光标只能在"+"后方及之后的区域移动，禁止选中或定位到前缀位置。
• 退格拦截：用onKeyEvent监听退格键，当光标已经处于前缀后方时，直接拦截事件，避免系统默认的光标前移行为。
• 文本兜底：ViewModel层面确保文本始终以"+"开头，处理用户通过粘贴、批量删除等操作移除前缀的情况。

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