Jetpack Compose按ID关联绘制卡片分类图标问题及解决

需求场景 #

我定义了两个数据类Item和CardMore，并创建对应的listOf集合用于Jetpack Compose的Card()组件展示。其中cardItems对应带“更多详情”子文本的卡片，itemList提供图标数据。需求是让卡片文本上方按分类展示对应Item的图标，比如“废纸”卡片需展示“可回收”和“纸张”的图标。最初编写的代码运行结果不符合预期，之后自行修复代码实现了需求。

数据类定义 #

data class Item(
    val id: Int,
    val name: String,
    val icon: Int,
    val color: androidx.compose.ui.graphics.Color
)

data class CardMore(
    val id: Int,
    val name: String,
    val icon: Int,
    val type: IntArray
)

数据源集合 #

val itemList = listOf(
    Item(0, "可回收", R.drawable.recycle_icon, recycle_icon_color),
    Item(1, "纸张", R.drawable.leaf_icon, leaf_icon_color),
    Item(2, "玻璃", R.drawable.beer_bottle_icon, beer_icon_color),
    Item(3, "金属", R.drawable.metal_icon, metal_icon_color),
    Item(4, "塑料", R.drawable.plastic_icon, plastic_icon_color),
    Item(5, "危险废物", R.drawable.toxic_icon, toxic_icon_color),
    Item(6, "电子产品", R.drawable.electronics_icon, electronics_icon_color),
    Item(7, "不可回收", R.drawable.close_icon, close_icon_color)
)

val cardItems = listOf(
    CardMore(8, "废纸", R.drawable.paper, intArrayOf(0, 1)),
    CardMore(9, "瓶子", R.drawable.bottles, intArrayOf(0, 2, 4)),
    CardMore(10, "药瓶", R.drawable.vials, intArrayOf(2, 4, 7)),
    CardMore(11, "金属罐", R.drawable.metal_jar, intArrayOf(0, 3)),
    CardMore(12, "布料", R.drawable.cloth, intArrayOf(0)),
    CardMore(13, "玻璃制品", R.drawable.glass, intArrayOf(0, 2)),
    CardMore(14, "药品", R.drawable.medicine, intArrayOf(0, 5)),
    CardMore(15, "家具", R.drawable.electro, intArrayOf(0, 6)),
    CardMore(16, "电器", R.drawable.furn, intArrayOf(0, 1)),
    CardMore(17, "厨余垃圾", R.drawable.food_waste, intArrayOf(0)),
    CardMore(18, "电池", R.drawable.battery, intArrayOf(0, 5, 6)),
)

最初代码（不符合预期） #

仅针对cardItems[0]单张卡片处理，无法遍历所有卡片，且存在冗余判断：

Box(modifier = Modifier.fillMaxWidth()) {
    Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.End) {
        cardItems[0].type.forEach { typeId ->
            val item = itemList.find { it.id == typeId }
            if (item != null && typeId in cardItems[0].type) {
                Icon(
                    painter = painterResource(id = item.icon),
                    contentDescription = item.name,
                    tint = item.color,
                    modifier = Modifier
                        .size(25.dp)
                        .padding(4.dp)
                )
            }
        }
    }
}

修复后代码（实现需求） #

使用LazyRow遍历所有卡片，为每个卡片单独处理对应图标集合，移除冗余判断：

LazyRow(modifier = Modifier) {
    items(cardItems) { item ->
        Card(
            modifier = Modifier
                .padding(8.dp)
                .width(120.dp)
                .height(100.dp)
                .clickable { },
            shape = roundedRectangleShape,
            elevation = 4.dp,
            backgroundColor = white
        ) {
            Box(modifier = Modifier.fillMaxWidth()) {
                Column(
                    Modifier.fillMaxSize(),
                    horizontalAlignment = Alignment.End
                ) {
                    item.type.forEach { typeId ->
                        val item = itemList.find { it.id == typeId }
                        if (item != null) {
                            Icon(
                                painter = painterResource(id = item.icon),
                                contentDescription = item.name,
                                tint = item.color,
                                modifier = Modifier
                                    .size(25.dp)
                                    .padding(4.dp)
                            )
                        }
                    }
                }
            }
        }
    }
}

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