Jetpack Compose自定义IME键盘如何实现字母大写功能？

我正在为自定义IME键盘实现字母大写功能，已经创建了大写按键，但不知道在clickable(interactionSource = interactionSource, indication = null)这个回调中应该编写什么逻辑。希望熟悉Compose键盘开发的开发者指点，如何在Jetpack Compose中实现该功能？

现有代码实现 #

大写按键Composable #

@Composable
fun KeyboardKeyCaps(
    keyboardKey: String, viewKeyboard: KeyboardViewModel
) {
    val interactionSource = remember { MutableInteractionSource() }
    val pressed = interactionSource.collectIsPressedAsState()
    val context = LocalContext.current
    val viewmodel = viewKeyboard
    val color by viewmodel.colorKeys.collectAsState()
    Box(contentAlignment = Alignment.Center) {
        Text(keyboardKey,
            Modifier
                .background(Color(android.graphics.Color.parseColor("#" + color)))
                .border(3.dp, Color.Black)
                .clickable(interactionSource = interactionSource, indication = null) {
                    (context as IMEService).currentInputConnection.let {

                    }
                }
                .padding(
                    start = 12.dp, end = 12.dp, top = 16.dp, bottom = 16.dp
                )

        )
        if (pressed.value) {
            Text(
                keyboardKey,
                Modifier
                    .border(1.dp, Color.Black)
                    .background(Color.Gray)
                    .padding(
                        start = 13.dp, end = 13.dp, top = 17.dp, bottom = 17.dp
                    )
            )
        }
    }
}

普通按键Composable #

@Composable
fun KeyboardKey(
    keyboardKey: String, viewKeyboard: KeyboardViewModel
) {
    val interactionSource = remember { MutableInteractionSource() }
    val pressed = interactionSource.collectIsPressedAsState()
    val context = LocalContext.current
    val viewmodel = viewKeyboard
    val color by viewmodel.colorKeys.collectAsState()
    Box(contentAlignment = Alignment.Center) {
        Text(keyboardKey,
            Modifier
                .background(Color(android.graphics.Color.parseColor("#" + color)))
                .border(3.dp, Color.Black)
                .clickable(interactionSource = interactionSource, indication = null) {
                    (context as IMEService).currentInputConnection.commitText(
                        keyboardKey, 0
                    )
                }
                .padding(
                    start = 12.dp, end = 12.dp, top = 16.dp, bottom = 16.dp
                )

        )
        if (pressed.value) {
            Text(
                keyboardKey,
                Modifier.graphicsLayer(clip = false)
                    .border(1.dp, Color.Black)
                    .background(Color.Gray)
                    .padding(
                        start = 16.dp, end = 16.dp, top = 36.dp, bottom = 16.dp
                    )
            )
        }
    }
}

效果说明 #

• 预期效果：点击大写按键后，普通字母按键切换为大写状态，输入的字母为大写；再次点击可切换回小写。
• 当前实现：大写按键点击无反应，无法触发字母切换。

要实现IME键盘的大写切换功能，核心是通过ViewModel维护大写状态，点击大写按键时切换状态，普通按键根据状态决定输入的大小写，同时给用户提供UI反馈。

步骤1：在ViewModel中添加大写状态 #

首先在KeyboardViewModel里添加可观察的状态，标记当前是否处于大写模式：

class KeyboardViewModel : ViewModel() {
    // 已有的colorKeys状态...
    private val _isCapsLocked = mutableStateOf(false)
    val isCapsLocked: State<Boolean> = _isCapsLocked

    fun toggleCapsLock() {
        _isCapsLocked.value = !_isCapsLocked.value
    }
}

步骤2：修改大写按键的点击逻辑 #

在KeyboardKeyCaps的clickable回调中，调用ViewModel的切换方法，还可同步系统输入法的状态（可选）：

.clickable(interactionSource = interactionSource, indication = null) {
    // 切换ViewModel中的大写状态
    viewmodel.toggleCapsLock()
    // 可选：同步系统输入法状态，刷新输入视图
    (context as IMEService).currentInputConnection?.setComposingText("", 0)
    (context as IMEService).updateInputViewShown()
}

同时为大写按键添加状态反馈，比如锁定时改变背景色：

// 在KeyboardKeyCaps中收集状态
val isCapsLocked by viewmodel.isCapsLocked.collectAsState()

// 修改背景色逻辑
.background(
    if (isCapsLocked) Color(android.graphics.Color.parseColor("#FFD700")) 
    else Color(android.graphics.Color.parseColor("#" + color))
)

步骤3：修改普通按键的输入逻辑 #

在KeyboardKey中，根据ViewModel的isCapsLocked状态决定输入和显示的大小写：

// 收集大写状态
val isCapsLocked by viewmodel.isCapsLocked.collectAsState()

// 修改显示文字
Text(
    if (isCapsLocked) keyboardKey.uppercase() else keyboardKey.lowercase(),
    // 原有Modifier...
)

// 修改输入逻辑
.clickable(interactionSource = interactionSource, indication = null) {
    val inputText = if (isCapsLocked) keyboardKey.uppercase() else keyboardKey.lowercase()
    (context as IMEService).currentInputConnection.commitText(inputText, 0)
    // 可选：如果是单次大写，输入后自动切回小写
    // if (isCapsLocked) viewmodel.toggleCapsLock()
}

步骤4：实现单次大写（可选） #

如果需要类似系统输入法的“单次大写”功能（输入一个字母后自动切回小写），可修改ViewModel区分锁定和单次状态：

class KeyboardViewModel : ViewModel() {
    private val _isSingleCapsActive = mutableStateOf(false)
    val isSingleCapsActive: State<Boolean> = _isSingleCapsActive

    fun activateSingleCaps() {
        _isSingleCapsActive.value = true
    }

    fun deactivateCaps() {
        _isSingleCapsActive.value = false
    }
}

之后在大写按键点击时调用activateSingleCaps()，普通按键输入后调用deactivateCaps()即可。

内容的提问来源于stack exchange，提问作者Дмитрий Малигон