尝试在 Jetpack Compose 中实现键盘布局答案

【问题标题】：Trying to achieve keyboard layout in Jetpack Compose尝试在 Jetpack Compose 中实现键盘布局
【发布时间】：2023-02-09 06:49:48
【问题描述】：

我正在尝试实现像这张图片中那样的正常键盘布局

然而，在过去的 3 个小时里，我一直坚持这个结果，我不知道我应该如何复制它，也许我遗漏了什么。键需要具有相同的宽度和高度，并且字母数量较少的行将居中。

现在我的代码看起来像这样：

@Composable
fun GameKeyboard() {

    val firstRow = listOf("Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P")
    val secondRow = listOf("A", "S", "D", "F", "G", "H", "J", "K", "L")
    val thirdRow = listOf("Z", "X", "C", "V", "B", "N", "M")

    Column(
        modifier = Modifier.fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(4.dp)
    ) {
        GameKeyboardRow(firstRow)
        GameKeyboardRow(secondRow)
        GameKeyboardRow(thirdRow)
    }
}

@Composable
fun GameKeyboardRow(keyList: List<String>) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.spacedBy(2.dp)
    ) {
        keyList.forEach {
            GameKeyboardKey(it, Modifier.weight(1f, true))
        }
    }
}

@Composable
fun GameKeyboardKey(key: String, modifier: Modifier) {

    Box(contentAlignment = Alignment.Center,
        modifier = modifier
            .aspectRatio(1f)
            .border(
                width = 2.dp,
                color = MaterialTheme.colorScheme.outline,
                shape = MaterialTheme.shapes.small
            )
            .clickable {

            }) {
        Text(
            text = key,
            textAlign = TextAlign.Center
        )
    }
}

【问题讨论】：

这回答了你的问题了吗？ Build Software Keyboard with Jetpack Compose - IME Input Method with Jetpack Compose

标签： android android-jetpack-compose

【解决方案1】：

Nvm，我自己找到了答案，如果有人正在寻找它，我会把它贴在这里，有时答案就在你眼前。

我最终数了数字母，并意识到我可以使用重量在第二行和第三行周围留出空间。

如果第一行有n 字母，那么第二行是n-1 字母，所以在Row 视图中，我将有两个Spacer 视图将采用weight / 2。相同的逻辑适用于具有 n-3 字母的第三行

    GameKeyboardRow(firstRow)
    GameKeyboardRow(secondRow, 1f)
    GameKeyboardRow(thirdRow, 3f)

然后 Row 看起来像这样：

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.spacedBy(2.dp)
) {
    if (marginWeight != null) {
        Spacer(modifier = Modifier.weight(marginWeight / 2))
    }

    keyList.forEach {
        GameKeyboardKey(it, Modifier.weight(1f, true))
    }

    if (marginWeight != null) {
        Spacer(modifier = Modifier.weight(marginWeight / 2))
    }
}

【讨论】：

或者您可以简单地为 GameKeyboardKey Composable 指定一个宽度/高度，而不是仅仅指定纵横比，这会迫使它调整大小以填满整个空间，并完全避免这个问题......但是是的，随心所欲我想是欲望。
此外，还可以使用 align 修饰符。对于复杂的 UI，我绝对会选择 Layout Composable。它是最好的，实际上我最终将它用于我的大部分 UI 设计。行和列有点太混乱，但布局让您可以完全控制您的用户体验，即测量和定位。实际上，Row 和 Column 是建立在它之上的。

【解决方案2】：

很晚才回答这个问题。可能是有人正在寻找一个简单的键盘。您可以使用存储库中的代码 https://github.com/UmairKhalid786/ComposeTvKeyboard

【讨论】：