如何在 Jetpack Compose 中更改文本字段光标位置

Question

我在文本字段上方有文本建议芯片视图列表，当用户单击芯片时，我将文本附加到文本字段中。之后我想将光标移动到结束位置。我在 Jetpack Compose 中找不到解决方案。之前我们使用 editText.setSelection(position) 更改 android 视图中的光标位置。

如何在jetpack compose Textfield中设置光标位置？

         OutlinedTextField(
                    value = value,
                    onValueChange = { value = it },
                    maxLines = 8,
                    label = {
                        Text(
                            text = "Content",
                            maxLines = 1
                        )
                    },

                    modifier = Modifier
                        .fillMaxWidth()
                        .height(200.dp),
                    shape = RoundedCornerShape(2.dp),

                    )

Answer 1

我们可以使用TextFieldValue来改变光标位置

像这样初始化TextFieldValue

 var textFieldValueState by remember {
        mutableStateOf(
            TextFieldValue(
                text = ""
            )
        )
    }

初始化后设置 TextFieldValue 就像下面的

OutlinedTextField(
    value = textFieldValueState,
    onValueChange = { textFieldValueState = it },
    ...
    )

要附加其他文本和选择光标，请按照以下步骤操作

IconButton(modifier = Modifier.then(Modifier.size(48.dp)),
     onClick = {
        val value = textFieldValueState.text.plus("****")
        textFieldValueState = TextFieldValue(
        text = value,
        selection = TextRange(value.length-2)
        )
     })

TextFieldValue text 和 selection 变量不可更改，因此我们需要创建新的 TextFieldValue 来设置文本和光标位置。