Jetpack Compose 具有不同大小的 LazyVerticalGrid 项目

Question

当我尝试使用 LazyVerticalGrid 显示图像列表时，一些网格项目具有不同的大小，即使图像本身具有完全相同的大小 240x178。

我绑定使用modifier.fillMaxWidth(),modifier.matchParentSize(),modifier.fillMaxHeight(),modifier.fillMaxWidth(),modifier.fillParentMaxHeight(),modifier.fillParentMaxWidth(),modifier.requiredHeight(imageHeight) , modifier.requiredWidth(imageWidth) 但没有任何东西可以帮助我让图像填满所有可用的 space 而没有留下任何空白 space 并且一些图像仍然与其他图像大小不同。

下面是我当前的实现，如果它很重要，我将使用 Coil 进行图像加载

 @OptIn(ExperimentalFoundationApi::class)
    @Composable
    fun TreasureGrid(treasures: List<MapTreasure>) {
        val configuration = LocalConfiguration.current

        val imageWidth = configuration.screenWidthDp.dp / 4
        val imageHeight = (imageWidth.times(1.348f))
        LazyVerticalGrid(
            cells = GridCells.Adaptive(imageWidth)
        ) {
            items(treasures.size) {
                TreasureItem(
                    treasures[it],
                    Modifier.requiredHeight(imageHeight).requiredWidth(imageWidth)
                )
            }
        }
    }

    @Composable
    fun TreasureItem(mapTreasure: MapTreasure, modifier: Modifier) {
        val resId = TMApplication.instance.resources.getIdentifier(
            mapTreasure.image,
            "drawable",
            TMApplication.instance.packageName
        )
        val matrix = ColorMatrix()
        val isOpened = getUser()?.openedTreasures?.contains(mapTreasure.name) == true
        if (isOpened.not()) {
            matrix.setToSaturation(0F)
        }
        Box {
            AsyncImage(
                model = resId,
                contentDescription = mapTreasure.description,
                modifier = modifier.clickable {
                    if (isOpened) {
                        activity?.let { DialogUtils.showTreasureInfoDialog(it, mapTreasure) }
                    } else {
                        Toast.makeText(activity, "Treasure not found", Toast.LENGTH_SHORT).show()
                    }
                }.matchParentSize(),
                colorFilter = ColorFilter.colorMatrix(matrix)
            )
            val alpha = if (isOpened) 0f else 1f
            AsyncImage(
                model = R.drawable.treasure_key,
                contentDescription = mapTreasure.description,
                modifier = modifier.rotate(90f).scale(0.3f).alpha(alpha)
            )
        }
    }

非常感谢任何有关如何使每个网格项目大小相同并移除其周围填充的建议

Answer 1

问题与代码无关。我发现设计师给了我相同大小的图片，但每张图片上的填充不同，所以问题出在图片资源本身。

Jetpack Compose 具有不同大小的 LazyVerticalGrid 项目

Jetpack Compose LazyVerticalGrid items having a different size

android

gridview

android-jetpack-compose