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

Question

I am trying to achieve a normal keyboard layout like in this picture

However, in the past 3 hours, I've been stuck with this result and I don't know how I am supposed to replicate this, maybe I'm missing something. The keys need to have the same width and height and the rows with a smaller number of letters will be centered.

Right now my code looks like this:

@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
        )
    }
}

Answer 1

Nvm, I found the answer myself, I will post it here if anybody else is looking for it, sometimes the answer is right in front of your eyes.

I ended up counting letters and realizing I can use the weight to space around the second and third rows.

if the first row has n letters, then the second row was n-1 letters so in the Row view, I will have two Spacer views that will take the weight / 2 . Same logic applies for third row which has n-3 letters

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

And then the Row looks like this:

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))
    }
}