android-jetpack-compose - 如何在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的来设置文本和光标位置。