防止键盘出现在 Jetpack Compose 应用程序中 [英] Prevent the keyboard from appearing in a Jetpack Compose app

问题描述

我正在制作一个计算器来学习 Compose，所以我在屏幕上放置了自己的数字按钮，我想防止软键盘出现.

I'm making a calculator to learn Compose, so I placed my own number buttons on screen and I wanted to prevent the soft keyboard from appearing.

这是我的存储库:https://github.com/vitor-ramos/CalculadorCompose

我注意到在 TextFieldImpl.kt 中有一个修饰符来显示键盘，所以我尝试克隆代码并删除该行:keyboardController.value?.showSoftwareKeyboard() 我知道这不是一个复制这样的代码是个好主意，但我想尝试一下，但它没有用.正如你在下面的原始代码中看到的，有一个 TODO 说它应该由 BaseTextField 处理，但我查看了它的代码并没有找到它显示或隐藏键盘的位置.

I noticed in TextFieldImpl.kt there is a modifier to show the keyboard, so I tried to clone the code and remove the line: keyboardController.value?.showSoftwareKeyboard() I know it's not a good idea to duplicate code like that, but I wanted to give it a try, and it didn't work. As you can see in the original code below there's a TODO saying it should be handled by BaseTextField, but I looked in it's code and didn't find where it shows or hides the keyboard.

val textFieldModifier = modifier
    .focusRequester(focusRequester)
    .focusObserver { isFocused = it.isFocused }
    .clickable(indication = null) {
        focusRequester.requestFocus()
        // TODO(b/163109449): Showing and hiding keyboard should be handled by BaseTextField.
        //  The requestFocus() call here should be enough to trigger the software keyboard.
        //  Investiate why this is needed here. If it is really needed, instead of doing
        //  this in the onClick callback, we should move this logic to the focusObserver
        //  so that it can show or hide the keyboard based on the focus state.
        keyboardController.value?.showSoftwareKeyboard()
    }

我在这个问题中发现，使用视图可以扩展 EditText 并更改功能，但我还没有找到 Compose 的等效项:Android:在所有 EditTexts 处禁用软键盘

I found in this question that with views I can extend EditText and change the functionality, but I haven't found a equivalent for Compose: Android: Disable soft keyboard at all EditTexts

public class NoImeEditText extends EditText {
    public NoImeEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    @Override
    public boolean onCheckIsTextEditor() {
        return false;
    }
}

推荐答案

说明

我创建了一个可组合的 ReadonlyTextField，它在文本字段前面放置了一个不可见的框.该框与文本字段的大小相同.

Explanation

I created a Composable ReadonlyTextField, that places a invisible box in front of the text field. The box has the same size as the text field.

使用该解决方法后，您将无法再聚焦文本字段，因此不会出现键盘.为了应用自定义点击处理，我在 Box-Modifier 中添加了一个 onClick.

With that workaround you can't focus the text field anymore, so no keyboard appears. In order to apply custom click handling, i added a onClick to the Box-Modifier.

这不是一个真正干净的解决方案，而是一个很好的解决方法.

This is not really a clean solution, but a good workaround.

@Composable
fun ReadonlyTextField(
    value: TextFieldValue,
    onValueChange: (TextFieldValue) -> Unit,
    modifier: Modifier = Modifier,
    onClick: () -> Unit,
    label: @Composable () -> Unit
) {

    Box {
        TextField(
            value = value,
            onValueChange = onValueChange,
            modifier = modifier,
            label = label
        )

        Box(
            modifier = Modifier
                .matchParentSize()
                .alpha(0f)
                .clickable(onClick = onClick),
        )
    }
}

ReadonlyTextField 的使用

@Composable
fun App() {
    val textState = remember { mutableStateOf(TextFieldValue()) }

    Column {
        ReadonlyTextField(
            value = textState.value,
            onValueChange = { textState.value = it },
            onClick = {
                // custom click handling (e.g. open dialog)
            },
            label = {
                Text(text = "Keyboardless Input")
            }
        )
    }
}

可以在我的媒体帖子中找到一个完整的集成示例:https://caelis.medium.com/jetpack-compose-datepicker-textfield-39808e42646a

A complete integrated example can be found in my medium post: https://caelis.medium.com/jetpack-compose-datepicker-textfield-39808e42646a

信用也转到这个stackoverflow答案:Jetpack Compose:禁用与 TextField 的交互

Credits also go to this stackoverflow answer: Jetpack Compose: Disable Interaction with TextField

这篇关于防止键盘出现在 Jetpack Compose 应用程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！