Jetpack Compose TextField搭配自动补全输入带点内容时光标异常问题

原因说明 #

该问题是Jetpack Compose 1.0.x版本的TextField组件已知缺陷，默认开启的输入法自动校正、拼写检查功能和组件的输入状态同步逻辑存在冲突，当输入包含半角句点的无空格字符串时，就会触发光标错位、字符插入顺序异常的问题，该问题在官方同期示例中也可复现，和你编写的代码逻辑无关。

修复方案 #

可根据项目实际情况选择以下方案：

• 无需升级版本的快速修复：给TextField添加keyboardOptions配置，关闭自动校正即可。
  修改后的代码如下：

  val (title, setTitle) = remember { mutableStateOf("") }
  TextField( 
      modifier = Modifier.padding(5.dp),
      maxLines = 1, 
      label = { Text(text = "Title") },
      value = title, 
      onValueChange = setTitle,
      // 新增下方配置项
      keyboardOptions = KeyboardOptions.Default.copy(autoCorrect = false)
  )
  

• 彻底解决的方案：将Jetpack Compose版本升级到1.1.0-alpha03及以上，官方已经在该版本修复了这个BUG，升级后无需额外配置即可正常使用。
• 兜底方案：如果暂时无法升级版本也不能关闭自动校正功能，可以改用更底层的BasicTextField组件，手动实现输入状态和光标位置的同步逻辑，不过开发成本相对更高，非必要不推荐。

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