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

Question

我有一份文本建议芯片视图显示在文本字段上方，当用户点击芯片时，我将文本附加到文本字段中。之后，我想将光标移动到末尾位置。我在Jetpack compose中找不到解决方法。之前我们在android视图中使用editText.setSelection(position)来更改光标位置。

如何在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),

                    )

- MathankumarK

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 来设置文本和光标位置。

- Curvegraph

---

不支持FireTV。 - Yuji

Answer 2

应使用"选择"和TextFieldValue：

@Composable
fun CustomTextField() {
    val textState = remember { mutableStateOf(TextFieldValue(viewState.contextText)) }}
   val focusRequester = remember { FocusRequester() }

BasicTextField(
    value = textState.value,
    onValueChange = {
                textState.value = it
                viewModel.onContextText(it.text)
            }
    modifier = Modifier.focusRequester(focusRequester),
    textStyle = ...
)

LaunchedEffect(Unit) {
    focusRequester.requestFocus()
}

 // Set cursor position to the end when the text changes
DisposableEffect(Unit) {
    textState.value = textState.value.copy(
        selection = TextRange(textState.value.text.length)
    )
    onDispose { }
}
}

- Dan Alboteanu

Answer 3

一个示例，展示如何在输入光标的当前位置插入新文本，并将光标移动到新位置。

// TextField
var textFieldValue by remember { mutableStateOf(TextFieldValue("")) }
TextField(textFieldValue, onValueChange = { textFieldValue = it })

private fun insertText(textFieldValue: TextFieldValue, insertText: String): TextFieldValue {
    val maxChars = textFieldValue.text.length
    val textBeforeSelection = textFieldValue.getTextBeforeSelection(maxChars)
    val textAfterSelection = textFieldValue.getTextAfterSelection(maxChars)
    val newText = "$textBeforeSelection$insertText$textAfterSelection"
    val newCursorPosition = textBeforeSelection.length + insertText.length
    return TextFieldValue(
        text = newText,
        selection = TextRange(newCursorPosition)
    )
}

// use
onClick = { 
 textFieldValue = insertText(textFieldValue, " #$tag")
} 

- QiXi

---

对我来说没用 - Anorov Hasan

Answer 4

@Composable
fun MyScreen() {
    var textState by remember { mutableStateOf("Hello, world!") }
    val focusRequester = remember { FocusRequester() }
    Column(
        modifier = Modifier.padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        BasicTextField(
            value = TextFieldValue(textState, selection = TextRange(textState.length)),
            onValueChange = { textState = it.text },
            modifier = Modifier
                .fillMaxWidth()
                .focusRequester(focusRequester),
        )
        Button(
            onClick = {
                // Request focus and set the cursor at the end of the text when the button is clicked
                focusRequester.requestFocus()
            },
            modifier = Modifier.padding(top = 16.dp)
        ) {
            Text("Move Cursor to End")
        }
    }
}

这行代码使用remember函数声明了一个FocusRequester对象。FocusRequester用于在程序中以编程方式请求对BasicTextField的焦点。

当按钮被点击时，调用focusRequester.requestFocus()来以编程方式请求对BasicTextField的焦点。

- Sayan Manna