单击jetpack compose中的空格时如何隐藏键盘？

Question

I am try to learning text field in android jetpack compose, so I have two text field in a screen, and when I typing somethings in first text field, I want to close keyboard when I click the space on screen. I was using

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

this line of code for it, it work, but it is not work for multi textfield like 10 textfield, when I click the 8.textfield for example, bottom screen looks black. I do not have any idea why it is black? Any idea?

@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

You can simply create clickable modifier in your column and run hide function in there.

val keyboardController = LocalSoftwareKeyboardController.current

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