☰

Android テキストフィールドの作成 外側をタッチするとキーボードが消える方法 質問する

tag-icon • tag-icon android android-jetpack-compose
Android テキストフィールドの作成 外側をタッチするとキーボードが消える方法 質問する

これは、フルスクリーン列に TextField を含む行です。TextFieldonFocusChangedをタップすると (アクティブになる)、およびキーボードで [完了] ボタンが押されると、コールバックが呼び出されます。ただし、TextField の外側をタップしてもハンドラーは呼び出されません。そのため、キーボードを閉じることができません。何かアイデアはありますか?

val (nameText, setNameText) = remember { mutableStateOf("")}
val keyboardController = LocalSoftwareKeyboardController.current
val focusRequester = FocusRequester()

Column(
    modifier = Modifier
        .fillMaxWidth()
        .fillMaxHeight()
        .padding(10.dp)
) { 
    Row(
        modifier = Modifier
            .fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceAround
    ) {
        TextField(
            value = nameText,
            onValueChange = setNameText,
            modifier = Modifier
                .focusRequester(focusRequester)
                .onFocusChanged {
                    if (!it.isFocused) {
                        keyboardController?.hide()
                    }
                }
                .padding(horizontal = 0.dp, vertical = 0.dp)
                .height(50.dp)
                .fillMaxWidth(),
            KeyboardOptions(
                keyboardType = KeyboardType.Text,
                imeAction = androidx.compose.ui.text.input.ImeAction.Done
            ),
            keyboardActions = KeyboardActions(onDone = {
                localFocusManager.clearFocus()
            }),
            placeholder = { Text("Enter a name", fontSize = 14.sp) }
        )
    }
}

列にフォーカス ハンドラーを設定しようとしましたが、機能しませんでした (外側をタップしてもフォーカス ハンドラーが呼び出されません)。Compose バージョン 1.0.2 を使用しています。

ベストアンサー1

タップ時にフォーカスを削除したい場合は、にpointerInput修飾子を追加します:detectTapGesturesColumn

Column(
    modifier = Modifier
        .fillMaxWidth()
        .fillMaxHeight()
        .padding(10.dp)
        .pointerInput(Unit) {
            detectTapGestures(onTap = {
                localFocusManager.clearFocus()
            })
        }
)

修飾子の後に追加しているのでpadding、padding ビュー部分はタッチを受け付けません。順序を変更すると、クリック可能な部分に padding が含まれるようになります。

見るその他のジェスチャータップだけでは不十分な場合。

おすすめ記事