基于Jetpack Compose的TV应用键盘重构：单一函数实现多类型按键

1. 抽象统一的按键数据模型 #

先定义一个密封类封装所有按键类型，把字符键、功能键（删除、清空、切换语言、空格）的共性和差异统一管理，彻底避免硬编码判断：

sealed class KeyboardKey {
    data class CharacterKey(val value: String) : KeyboardKey()
    data class FunctionKey(val type: FunctionType, val displayText: String) : KeyboardKey()
}

enum class FunctionType {
    DELETE, CLEAR, SWITCH_LANGUAGE, SPACE
}

不管是普通字符还是功能按键，都能通过KeyboardKey类型统一传递，每个按键携带自身必要信息（比如字符键存具体字符，功能键存操作类型和显示文本）。

2. 抽离布局配置为按键列表 #

把原来分散在EnglishCharacters、ArabicCharacters等函数里的行布局，转换成由KeyboardKey组成的二维列表（每行对应一个子列表）。比如英文键盘的布局可以写成：

val englishKeyboardLayout: List<List<KeyboardKey>> = listOf(
    listOf(
        KeyboardKey.CharacterKey("Q"),
        KeyboardKey.CharacterKey("W"),
        // ... 其他字母键
    ),
    listOf(
        KeyboardKey.FunctionKey(FunctionType.SPACE, " "),
        KeyboardKey.FunctionKey(FunctionType.DELETE, "←"),
        KeyboardKey.FunctionKey(FunctionType.SWITCH_LANGUAGE, "AR")
    )
)

不同语言或符号键盘的布局都用这种方式定义，后续切换键盘时直接传入对应的布局列表即可。

3. 实现单一渲染函数 #

编写通用的Compose渲染函数，接收按键布局列表和点击回调，内部遍历布局并根据按键类型渲染UI：

@Composable
fun TvKeyboard(
    keyboardRows: List<List<KeyboardKey>>,
    onKeyAction: (KeyboardKey) -> Unit
) {
    Column(modifier = Modifier.fillMaxWidth()) {
        keyboardRows.forEach { row ->
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                row.forEach { key ->
                    when (key) {
                        is KeyboardKey.CharacterKey -> {
                            Button(onClick = { onKeyAction(key) }) {
                                Text(text = key.value)
                            }
                        }
                        is KeyboardKey.FunctionKey -> {
                            Button(onClick = { onKeyAction(key) }) {
                                when (key.type) {
                                    FunctionType.DELETE -> Icon(Icons.Default.Backspace, contentDescription = "Delete")
                                    else -> Text(text = key.displayText)
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

调用时只需传入对应布局：TvKeyboard(englishKeyboardLayout) { key -> /* 处理按键逻辑，比如插入字符、执行删除 */ }

4. 复用与扩展优化 #

• 把按键UI抽成独立组件：比如写@Composable fun KeyboardKeyButton(key: KeyboardKey, onClick: () -> Unit)，内部统一处理按键样式、焦点（TV应用需重点关注焦点逻辑），让渲染函数更简洁。
• 通用功能键封装成常量：比如val DeleteKey = KeyboardKey.FunctionKey(FunctionType.DELETE, "←")，避免重复定义。

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