You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何正确使用itemsIndexed?实现仅遍历列表指定元素生成表格

解决方案

有两种常用方式可以实现只处理列表中指定元素的需求,以下是具体实现:

方法1:先过滤出目标子列表再遍历

直接对原列表进行截取,只保留需要处理的元素(比如示例中的最后两个元素),再将这个子列表传入itemsIndexed。这种方式代码更简洁,性能也更优,因为不需要遍历整个原列表。

修改后的代码:

@Composable
fun FirstTable(dataList: List<AircraftData>) {
    // 只保留列表的最后2个元素,对应示例中的4和5
    val targetList = dataList.takeLast(2)
    itemsIndexed(targetList) { _, data ->
        Row(
            Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            val color = if(data.item == "R Seat") Color.Red else Color.White

            TableCell(
                text = data.item,
                alignment = TextAlign.Center,
                color = color
            )
            TableCell(text = data.weight)
            TableCell(text = data.armx)
            TableCell(text = data.army)
            TableCell(text = data.momx)
            TableCell(text = data.momy)
        }
    }
}

如果你的目标元素不是固定的最后两个,而是特定索引范围(比如索引3到4),可以用subList:

// 注意subList的结束索引是开区间,所以要取到索引4的话,结束值是5
val targetList = dataList.subList(3, 5)

方法2:在itemsIndexed中判断索引

如果需要保留遍历整个列表的逻辑,但只渲染符合条件的元素,可以在lambda中添加索引判断,不符合条件时返回空Composable:

@Composable
fun FirstTable(dataList: List<AircraftData>) {
    itemsIndexed(dataList) { index, data ->
        // 只处理索引为3和4的元素(对应示例中的4和5)
        if (index == 3 || index == 4) {
            Row(
                Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                val color = if(data.item == "R Seat") Color.Red else Color.White

                TableCell(
                    text = data.item,
                    alignment = TextAlign.Center,
                    color = color
                )
                TableCell(text = data.weight)
                TableCell(text = data.armx)
                TableCell(text = data.army)
                TableCell(text = data.momx)
                TableCell(text = data.momy)
            }
        } else {
            // 不符合条件时返回空布局,避免占位
            Box(Modifier.height(0.dp))
        }
    }
}

这种方式适合需要基于动态条件判断是否渲染的场景,但会遍历整个列表,性能略逊于第一种方法。


内容的提问来源于stack exchange,提问作者nextural

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.15 21:10:02