I am trying to get my Lazy Vertical Grid to be working the way I have it in the non-JetpackCompose version. I have this keypad that contains buttons ranging from 0 to 9 and a clear button. The grid is 3 buttons wide, it starts with 1 to 9, the last column contains 0 and CLEAR, however the CLEAR buttons should be twice as wide as the other buttons. See this image from the non-Jetpack Compose version of my app:enter image description here

这是我目前拥有的代码,请注意,我刚刚开始从事Jetpack编写工作,所以与其他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
                    )
                }
            }
        }

推荐答案

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

enter image description here

Android相关问答推荐

如何允许我的应用程序在Android 10上运行,同时目标是API 33

修改参数应该应用于哪些子元素?

不能在LazyGrid-Jetpack Compose中使用填充最大宽度或填充父项最大宽度

在Jetpack Compose中从LazyColumn中删除项目时发生IndexOutOf边界异常

如何在初始合成期间在可组合函数中调用/获取远程API中的数据[防止无限重组]

LaunchedEffect没有延迟时应用程序崩溃

(已解决)从最近的应用程序打开应用程序时出错

SQLite Kotlin 问题 - 没有数据库

@Immutable 对数据类有什么好处?

列表更改时,RecyclerView 中的列表不会更新

如何将一个 Composable 作为其参数传递给另一个 Composable 并在 Jetpack Compose 中显示/运行它

导航组件中预期的函数调用map(...)

是否可以在 Kotlin 中为 mutableStateOf() 设置自定义设置器

自定义 Compose Arrangement 以在 LazyRow/LazyColumn 的开头和结尾添加额外的间距

优化 Room 数据库迁移

jetpack compose 中的可点击指示是什么?

禁用通知权限后启动前台服务导致崩溃(Android 13)

如果我在网络请求中指定它们是否与判断网络功能相关

我可以在不解密的情况下使用 JSch 获取加密的 SSH 私钥的类型或 fingerprint 吗?

未使用的内容填充参数