如何移除JetPack Compose中BasicTextField的合成指示器

问题说明 #

需要移除BasicTextField中输入法合成文本时显示的下划线指示器；尝试通过textFieldValue.copy(composition = null)清除合成状态，但引发了无限循环更新问题；已在CoreTextField源码中定位到添加该下划线Span的逻辑，但不清楚如何通过外部配置移除。

可行解决方案 #

方案1：避免循环的合成状态清除方式 #

不要在onValueChange中直接重置composition，改用LaunchedEffect监听文本状态，仅当合成状态存在时一次性清除：

var textState by remember { mutableStateOf(TextFieldValue()) }

LaunchedEffect(textState) {
    textState.composition?.let {
        textState = textState.copy(composition = null)
    }
}

BasicTextField(
    value = textState,
    onValueChange = { textState = it },
    // 其他自定义配置
)

这个方式利用LaunchedEffect的单次触发特性，避免了因重复设置composition导致的循环更新。

方案2：自定义文本绘制逻辑（进阶） #

如果需要完全控制文本绘制，可以使用BasicTextField的decorator参数，自行实现文本渲染，跳过合成指示器的绘制：

BasicTextField(
    value = textState,
    onValueChange = { textState = it },
    decorator = { innerTextField ->
        // 自定义文本绘制，仅渲染输入文本，不处理合成指示器
        Text(
            text = textState.text,
            // 匹配TextField的样式配置
            style = LocalTextStyle.current
        )
        innerTextField()
    }
)

注意：这种方式会完全接管文本显示，需要自行对齐原TextField的样式（如光标、选中状态等）。

内容的提问来源于stack exchange，提问作者Irineu A. Silva