如何在jetpack 撰写TextField 中保持光标在视图中？

Question

我正在开发一个jetpack撰写笔记应用程序。我在一列中使用了两个文本字段，但光标一直在键盘后面移动。我还检查了官方的 Android 架构示例应用程序。他们还使用了一些技巧来保持光标在视图中。

有什么解决办法吗？

视频：https://imgur.com/a/LCLwe7p Github：https://github.com/laraib07/zenote/blob/main/app/src/main/java/com/laraib07/zenote/ui/screen/add_edit/AddEditNote.kt

光标必须保留在屏幕上。

Answer 1

您可以尝试以下步骤：

1. 通过在清单文件中的活动上设置

   android:windowSoftInputMode=adjustResize

   来防止键盘重叠内容。例如：

<activity
android:name=".MainActivity"
android:windowSoftInputMode="adjustResize">

2. 要在键入时保持光标始终可见，您可以使用

   BringIntoViewRequester()

   将容器滚动到光标所在的位置。这是一个例子：

val bringIntoViewRequester = remember { BringIntoViewRequester() }
val coroutineScope = rememberCoroutineScope()

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

BasicTextField(
    value = textFieldValue,
    onValueChange = { textFieldValue = it },
    textStyle = TextStyle(fontSize = 30.sp),
    onTextLayout = {
        val cursorRect = it.getCursorRect(textFieldValue.selection.start)
        coroutineScope.launch {
            bringIntoViewRequester.bringIntoView(cursorRect)
        }
    },
    modifier = Modifier
        .bringIntoViewRequester(bringIntoViewRequester)
        .fillMaxWidth()
)

这是一个在垂直可滚动列内有两个文本字段的示例：

val bringIntoViewRequester1 = remember { BringIntoViewRequester() } // Text Field 1 BringIntoViewRequester()
val bringIntoViewRequester2 = remember { BringIntoViewRequester() } // Text Field 2 BringIntoViewRequester()
val coroutineScope = rememberCoroutineScope()

var textFieldValue1 by remember { mutableStateOf(TextFieldValue()) } // Text Field 1 value
var textFieldValue2 by remember { mutableStateOf(TextFieldValue()) } // Text Field 2 value

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(10.dp)
        .border(1.dp, Color.Red, RectangleShape)
        .verticalScroll(rememberScrollState())
) {
    Surface(modifier = Modifier.border(1.dp, Color.Black, RectangleShape)) {
        BasicTextField(
            value = textFieldValue1,
            onValueChange = { textFieldValue1 = it },
            textStyle = TextStyle(fontSize = 30.sp),
            onTextLayout = {
                var cursorRect = it.getCursorRect(textFieldValue1.selection.start) // Get Text Field 1 cursor position
                coroutineScope.launch {
                    bringIntoViewRequester1.bringIntoView(cursorRect) // Scroll to Text Field 1 cursor position
                }
            },
            modifier = Modifier
                .bringIntoViewRequester(bringIntoViewRequester1) // Add BringIntoViewRequester() modifier for Text Field 1
                .fillMaxWidth()
        )
    }
    Surface(modifier = Modifier.border(1.dp, Color.Black, RectangleShape)) {
        BasicTextField(
            value = textFieldValue2,
            onValueChange = { textFieldValue2 = it },
            textStyle = TextStyle(fontSize = 30.sp),
            onTextLayout = {
                var cursorRect = it.getCursorRect(textFieldValue2.selection.start) // Get Text Field 2 cursor position
                coroutineScope.launch {
                    bringIntoViewRequester2.bringIntoView(cursorRect) // Scroll to Text Field 2 cursor position
                }
            },
            modifier = Modifier
                .bringIntoViewRequester(bringIntoViewRequester2) // Add BringIntoViewRequester() modifier for Text Field 2
                .fillMaxWidth()
        )
    }
}