Вес коробки в ленивой вертикальной сетке — Jetpack Compose

Я пытаюсь заставить мою ленивую вертикальную сетку работать так, как она есть в версии, отличной от JetpackCompose. У меня есть клавиатура с кнопками от 0 до 9 и кнопкой очистки. Ширина сетки составляет 3 кнопки, она начинается с цифр от 1 до 9, последний столбец содержит 0 и CLEAR, однако кнопки CLEAR должны быть в два раза шире остальных кнопок. Посмотрите это изображение из версии моего приложения, отличной от Jetpack Compose:

Это код, который у меня сейчас есть, обратите внимание, что я только начал работать с компоновкой реактивного ранца, поэтому мои знания не так высоки по сравнению с другим стилем XML.

LazyVerticalGrid(
            GridCells.Fixed(3),
            modifier = Modifier.fillMaxWidth()
        ) {
            itemsIndexed(keypadBtn + listOf("0", "CLEAR")) { _, keyTxt ->
                Box(
                    contentAlignment = Alignment.Center,
                    modifier = Modifier
                        .fillMaxWidth()
                        .size(width = if (keyTxt == "CLEAR") 260.dp else 120.dp, height = 80.dp)
                        .padding(start = 5.dp, end = 5.dp, top = 5.dp, bottom = 5.dp)
                        .clip(RoundedCornerShape(16.dp))
                        .background(if (keyTxt == "CLEAR") Color.Gray else Color.White)
                        .weight(if (keyTxt == "CLEAR") 2f else 1f)
                        .clickable {
                            // Handle click action here
                        }
                ) {
                    Text(
                        text = keyTxt,
                        color = if (keyTxt == "CLEAR") Color.White else Color.Black,
                        fontSize = 36.sp,
                        fontWeight = FontWeight.Bold
                    )
                }
            }
        }
1
0
237
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
@Composable
fun NumberDemo() {
    val list = listOf("1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "CLEAR")
    LazyVerticalGrid(
        columns = GridCells.Fixed(3),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(list.size, span = { index ->
            val spanCount = if (index == list.size - 1) 2 else 1
            GridItemSpan(spanCount)
        }) { count ->
            Box(contentAlignment = Alignment.Center, modifier = Modifier
                .fillMaxWidth()
                .padding(start = 5.dp, end = 5.dp, top = 5.dp, bottom = 5.dp)
                .clip(RoundedCornerShape(16.dp))
                .background(if (list[count] == "CLEAR") Color.Gray else Color.White)
                .clickable {
                    // Handle click action here
                }) {
                Text(
                    text = list[count],
                    color = if (list[count] == "CLEAR") Color.White else Color.Black,
                    fontSize = 36.sp,
                    fontWeight = FontWeight.Bold
                )
            }
        }
    }
}

Другие вопросы по теме