如何在Jetpack Compose中点击空格时隐藏键盘?

3

我正在学习Android Jetpack Compose中的文本字段,在一个屏幕中有两个文本字段。当我在第一个文本字段中输入内容时,希望在屏幕上点击空白处时关闭键盘。我尝试使用

 .pointerInput(Unit) {
                detectTapGestures(onTap = {
                    focusManager.clearFocus()
                })
            } 

这段代码适用于单个文本框,它能够正常工作。但是当使用多达10个文本框时,比如我点击第8个文本框,底部屏幕会变黑。我不知道为什么会这样,你有什么想法吗?
@Composable
fun KeyboardSample(){
val focusManager = LocalFocusManager.current
    Column(
        modifier = Modifier
            .fillMaxSize()
         .pointerInput(Unit) {
            detectTapGestures(onTap = {
                focusManager.clearFocus()
            })
        }
            .padding(start = 16.dp, end = 16.dp),

    ) {

        var name by rememberSaveable { mutableStateOf("") }
        val updateName = { _name : String ->
            name = _name
        }

        var amount by rememberSaveable { mutableStateOf("") }
        val updateAmount = { _amount : String ->
            amount = _amount
        }

        TextFiledsToExperiment(
            name = name,
            updateName = updateName,
            amount = amount,
            updateAmount = updateAmount
        )

    }
}

@Composable
fun TextFiledsToExperiment(
    name : String,
    updateName : (String) -> Unit,
    amount : String,
    updateAmount : (String) -> Unit
){
    val focusManager = LocalFocusManager.current

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        OutlinedTextField(
            value = name,
            onValueChange = updateName ,
            label = { Text("Name") },
            placeholder = { Text(text = "Name") },
            singleLine = true,
            keyboardOptions = KeyboardOptions.Default.copy(
                capitalization = KeyboardCapitalization.Sentences,
                autoCorrect = true,
                keyboardType = KeyboardType.Text,
                imeAction = ImeAction.Next
            ),
            keyboardActions = KeyboardActions(onNext = {
                focusManager.moveFocus(FocusDirection.Down)
            }),
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 6.dp, start = 0.dp, end = 0.dp, bottom = 6.dp),
        )

        OutlinedTextField(
            value = amount,
            onValueChange = updateAmount ,
            label = { Text("Amount") },
            placeholder = { Text(text = "Amount") },
            singleLine = true,
            keyboardOptions = KeyboardOptions.Default.copy(
                capitalization = KeyboardCapitalization.Sentences,
                autoCorrect = true,
                keyboardType = KeyboardType.Number,
                imeAction = ImeAction.Done
            ),
            keyboardActions = KeyboardActions(onDone = {
                focusManager.clearFocus()
            }),
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 6.dp, start = 0.dp, end = 0.dp, bottom = 6.dp),
        )

    }
}
1个回答

10

您可以在列中创建可点击的修改器,然后在其中运行隐藏函数。

val keyboardController = LocalSoftwareKeyboardController.current

Column(Modifier.clickable{keyboardController?.hide()}){
//
}

非常感谢,十分感激 :) - SpaceDevs

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接