Jetpack Compose中LazyVerticalGrid内Box的权重适配问题

需求说明 #

我想用Jetpack Compose的LazyVerticalGrid实现非Compose版本的数字键盘效果：键盘包含0-9数字键和CLEAR键，网格为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
                    )
                }
            }
        }

要实现目标布局，核心是利用LazyVerticalGrid的跨列配置，通过GridItemSpan指定CLEAR键占据2列，同时优化布局逻辑。以下是修改后的完整代码：

// 定义完整的键盘按键列表，保证顺序符合需求
val keypadItems = listOf("1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "CLEAR")

LazyVerticalGrid(
    columns = GridCells.Fixed(3),
    modifier = Modifier.fillMaxWidth(),
    // 统一设置按键间的间距，替代手动padding
    horizontalArrangement = Arrangement.spacedBy(5.dp),
    verticalArrangement = Arrangement.spacedBy(5.dp),
    contentPadding = PaddingValues(5.dp)
) {
    items(keypadItems, span = { item ->
        // CLEAR键跨2列，其他按键占1列
        if (item == "CLEAR") GridItemSpan(2) else GridItemSpan(1)
    }) { keyTxt ->
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .fillMaxWidth()
                .height(80.dp)
                .clip(RoundedCornerShape(16.dp))
                .background(if (keyTxt == "CLEAR") Color.Gray else Color.White)
                .clickable {
                    // 处理按键点击逻辑
                }
        ) {
            Text(
                text = keyTxt,
                color = if (keyTxt == "CLEAR") Color.White else Color.Black,
                fontSize = 36.sp,
                fontWeight = FontWeight.Bold
            )
        }
    }
}

关键修改说明 #

• 跨列实现：通过items的span参数，给CLEAR键设置GridItemSpan(2)，让它自动占据2列宽度，这是实现CLEAR键宽两倍的核心，比手动设置size更适配网格布局。
• 布局优化：用spacedBy统一设置按键间距，配合contentPadding替代每个按键的手动padding，布局更简洁且间距均匀。
• 修饰符精简：移除无效的size和weight，LazyVerticalGrid会根据列数和跨列设置自动分配宽度，fillMaxWidth()让按键填充所在列的空间。
• 数据列表调整：直接定义顺序正确的按键列表，确保1-9按3列排列，0位于最后一行第一列，CLEAR占据后两列，完全匹配需求布局。

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