Jetpack Compose TextField如何默认显示数字键盘且支持切换至字符键盘？

要实现默认显示数字键盘、同时支持切换到全字符键盘的需求，可以通过维护键盘类型状态+添加切换按钮来实现，具体方案如下：

1. 定义键盘类型状态 #

用remember和mutableStateOf保存当前键盘类型，初始设为KeyboardType.Number，确保默认弹出数字键盘：

var keyboardType by remember { mutableStateOf(KeyboardType.Number) }

2. 改造TextField与添加切换按钮 #

将TextField的keyboardOptions绑定到上述状态，同时在输入框旁添加切换按钮，点击时切换键盘类型：

Row(
    modifier = Modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween
) {
    TextField(
        value = numberValue,
        onValueChange = { numberValue = it },
        keyboardOptions = KeyboardOptions(keyboardType = keyboardType),
        label = { Text("ID输入框") },
        modifier = Modifier.weight(1f)
    )

    IconButton(onClick = {
        keyboardType = if (keyboardType == KeyboardType.Number) {
            KeyboardType.Text
        } else {
            KeyboardType.Number
        }
    }) {
        Icon(
            imageVector = if (keyboardType == KeyboardType.Number) {
                Icons.Default.Keyboard
            } else {
                Icons.Default.Numbers
            },
            contentDescription = if (keyboardType == KeyboardType.Number) {
                "切换到字符键盘"
            } else {
                "切换到数字键盘"
            }
        )
    }
}

3. 效果说明 #

• 初始打开时默认弹出数字键盘，适配99%的数字输入场景
• 需要输入非数字字符时，点击右侧按钮即可切换到全字符键盘
• 再次点击按钮可切回数字键盘，操作直观便捷

可选补充：数字模式下的输入过滤 #

如果需要在数字键盘模式下限制仅输入数字，可在onValueChange中添加过滤逻辑：

onValueChange = { newText ->
    numberValue = if (keyboardType == KeyboardType.Number) {
        newText.filter { it.isDigit() }
    } else {
        newText
    }
}

内容的提问来源于stack exchange，提问作者Arcantos