如何在聚焦且用户输入前触发VisualTransformation并定位光标

当然可以实现这个需求，不需要刻意触发VisualTransformation，而是通过焦点监听+自定义光标定位+视觉转换的组合来达成目标。以下是具体实现方案：

1. 自定义VisualTransformation实现前缀显示 #

先写一个带前缀的视觉转换类，负责在输入框中显示固定的$前缀，同时确保光标偏移的正确映射：

class PrefixTransformation(private val prefix: String) : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {
        // 拼接前缀和用户输入文本
        val transformedText = AnnotatedString("$prefix${text.text}")
        // 定义光标位置映射：用户实际输入的索引要加上前缀长度
        val offsetMapping = object : OffsetMapping {
            override fun originalToTransformed(offset: Int): Int = offset + prefix.length
            override fun transformedToOriginal(offset: Int): Int = maxOf(0, offset - prefix.length)
        }
        return TransformedText(transformedText, offsetMapping)
    }
}

2. 核心Composable实现 #

在OutlinedTextField中结合焦点监听和光标控制，实现聚焦时光标自动定位到$的前方或后方：

@Composable
fun DollarPrefixTextField(modifier: Modifier = Modifier) {
    var text by remember { mutableStateOf("") }
    val focusRequester = remember { FocusRequester() }
    var isFocused by remember { mutableStateOf(false) }
    val scope = rememberCoroutineScope()
    val textInputService = LocalTextInputService.current

    OutlinedTextField(
        modifier = modifier
            .focusRequester(focusRequester)
            .onFocusChanged { state ->
                isFocused = state.isFocused
                // 聚焦且文本为空时，调整光标位置
                if (isFocused && text.isEmpty()) {
                    scope.launch {
                        // 延迟确保UI更新完成，再设置光标
                        delay(10)
                        textInputService?.apply {
                            showSoftwareKeyboard()
                            // 光标放在$后面：TextRange(1,1)
                            // 光标放在$前面：TextRange(0,0)
                            setTextFieldState(
                                TextFieldState(
                                    text = AnnotatedString(text),
                                    selection = TextRange(1, 1)
                                )
                            )
                        }
                    }
                }
            },
        value = text,
        onValueChange = { text = it },
        label = { Text("Input Here") },
        visualTransformation = PrefixTransformation("$"),
        placeholder = { Text("$") }, // 非聚焦时显示占位符
        keyboardOptions = KeyboardOptions.Default.copy(keyboardType = KeyboardType.Number)
    )
}

关键逻辑说明 #

• 视觉转换：PrefixTransformation只负责在界面上显示$前缀，实际存储的text变量并不包含$，后续处理数据时无需额外清理。
• 光标定位：通过LocalTextInputService在聚焦时主动设置光标位置，TextRange(1,1)对应$的后方，TextRange(0,0)对应前方。
• 焦点监听：利用onFocusChanged回调捕获聚焦状态，配合协程延迟确保UI更新完成后再调整光标，避免出现位置不生效的问题。

内容的提问来源于stack exchange，提问作者z.g.y