如何在 Jetpack Compose 中将 onTextLayout 应用于 OutlinedTextField？

Question

我编写了使用 BasicTextField 使聚焦的 TextField 始终在键盘上方可见的代码。

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CustomTextField(
    value: String,
    onValueChange: (String) -> Unit
    ) {
    val bringIntoViewRequester = remember { BringIntoViewRequester() }
    val coroutineScope = rememberCoroutineScope()

    var textFieldValue by remember { mutableStateOf(TextFieldValue(value)) }

    BasicTextField(
        value = textFieldValue,
        onValueChange = {
            textFieldValue = it
            onValueChange(it.text)
        },
        onTextLayout = {
            val cursorRect = it.getCursorRect(textFieldValue.selection.start)
            coroutineScope.launch {
                bringIntoViewRequester.bringIntoView(cursorRect)
            }
        },
        modifier = Modifier.bringIntoViewRequester(bringIntoViewRequester)
    )
}

我正在尝试将其应用于 OutlinedTextField，但不幸的是，它似乎与 OutlinedTextField 不兼容。
因此，我尝试将 OutlinedTextField 与decorationBox一起使用，但这种方法不成功。

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CustomTextField(
    value: String,
    textStyle: TextStyle,
    modifier: Modifier,
    onValueChange: (String) -> Unit
) {
    val bringIntoViewRequester = remember { BringIntoViewRequester() }
    val coroutineScope = rememberCoroutineScope()

    var textFieldValue by remember { mutableStateOf(TextFieldValue(value)) }

    BasicTextField(
        value = textFieldValue,

        onValueChange = {
            textFieldValue = it
            onValueChange(it.text)
        },
        onTextLayout = {
            val cursorRect = it.getCursorRect(textFieldValue.selection.start)
            coroutineScope.launch {
                bringIntoViewRequester.bringIntoView(cursorRect)
            }
        },
        decorationBox = @Composable { innerTextField ->
            OutlinedTextField(
                value = textFieldValue.text,
                onValueChange = {},
                modifier = modifier.fillMaxWidth(),
                textStyle = textStyle,
            )
            innerTextField()
        },
        modifier = Modifier.bringIntoViewRequester(bringIntoViewRequester)
    )
}

您能提供一些建议吗？

Answer 1

我认为它们是为不同的目的而设计的。 所以你可以只使用

OutlineTextField

而不使用

BasicTextField

类似这样的事情：

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CustomOutlinedTextField(
    value: String,
    onValueChange: (String) -> Unit,
    textStyle: TextStyle = TextStyle.Default,
    modifier: Modifier = Modifier
) {
    val bringIntoViewRequester = remember { BringIntoViewRequester() }
    val coroutineScope = rememberCoroutineScope()

    OutlinedTextField(
        value = value,
        onValueChange = { newValue ->
            onValueChange(newValue)
            coroutineScope.launch {
                bringIntoViewRequester.bringIntoView()
            }
        },
        textStyle = textStyle,
        modifier = modifier
            .bringIntoViewRequester(bringIntoViewRequester)
    )
}