在 Jetpack Compose 中每出现第 5 个项目后，在多类型惰性列中显示不同的可组合项目

Question

我有两个列表，长度为 200 的数字列表和长度为 26 的字母列表。两个列表都有不同的可组合项来显示它们，即 NumberItem() 和 AlphabetItem()。

我希望在 LazyColoumn 中每 5 个 NumberItem() 项之后显示 AlphabetItem()。

我的代码和结果：

    @Composable
fun LazyColumnWithMultipleTypesSample() {
    val numList = (1..200).toList()
    val alphabetList = ('A'..'Z').toList()
    val context = LocalContext.current

    LazyColumn(modifier = Modifier.fillMaxSize()) {
        items(count = numList.size + alphabetList.size) { index ->



            if (index % 5 == 0 && index / 5 < alphabetList.size) { //for index=0 , index%5==0 is always true, hence we make sure index is not 0 so this item does not appear as first item
                // Display alphabet item
                AlphabetItem(
                    char = alphabetList[index / 5], //-1 so 0th index also be seen
                    onClick = { char ->
                        Toast.makeText(context, "Alphabet clicked: $char", Toast.LENGTH_SHORT)
                            .show()
                    }
                )
            }
            // Display number item
            val numIndex = index
            if (numIndex < numList.size) //checking index overflow is not there
                NumberItem(
                    number = numList[numIndex],
                    onClick = { number ->
                        Toast.makeText(context, "Number clicked: $number", Toast.LENGTH_SHORT)
                            .show()
                    }
                )

        }
    }
}

注意，第一个 AlphabetItem() 不在第 6 个索引中，而是在第 0 个索引中。

我想要 5 个 NumberItem() 项目，然后是 1 个 AlphabetItem() 等等。 如果 AlphabetList 耗尽，之后只显示 numberItem。

我已经尝试过，对 AlphabetItem() 进行额外的 if(index>0) 检查，它加载了除字母“A”之外的所有项目。

Answer 1

您可以在检查之前将

index / 5

减1，因此索引0变为-1，5变为0，依此类推。

if (index % 5 == 0 && (index / 5 - 1) in 0..alphabetList.lastIndex) {
    AlphabetItem(
        char = alphabetList[(index / 5 - 1)],