單擊jetpack compose中的空格時如何隱藏鍵盤？

Question

我正在嘗試學習 android jetpack compose 中的文本字段，所以我在屏幕上有兩個文本字段，當我在第一個文本字段中輸入內容時，我想在單擊屏幕上的空格時關閉鍵盤。 我正在使用

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

這行代碼，它可以工作，但它不適用於像 10 個文本字段這樣的多文本字段，例如，當我單擊 8.textfield 時，底部屏幕看起來是黑色的。 我不知道為什么它是黑色的？ 任何想法？

@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),
        )

    }
}

Answer 1

您可以簡單地在列中創建可點擊修飾符並在其中運行隱藏功能。

val keyboardController = LocalSoftwareKeyboardController.current

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