Merge custom content in Composables - android-jetpack-compose

Question

I have 2 custom components in Jetpack Compose:
#Composable
fun IconText(modifier: Modifier, icon: Int, text: String) {/**/}
and a grid where it is currently hardcoded:
#Composable
fun VerticalGrid( //fun <T> VerticalGrid(
data: List<Pair<Resource, Int>>, //List<T>,
columnCount: Int,
itemContent: #Composable () -> Unit
) {
val size = data.size
val rows = if (size == 0) 0 else 1 + (size - 1) / columnCount
for (rowIndex in 0..rows) {
val itemIndex = rowIndex * columnCount
Row {
val end = min(itemIndex + columnCount, size)
for (index in itemIndex until end) {
IconText(modifier = Modifier.weight(1f), data[index].first.image, data[index].second.toString())
}
}
}
}
How can I make the grid more customisable and change IconText to the custom itemContent?

Answer 1

You can do this by passing parameters to content lambda
#Composable
fun IconText(modifier: Modifier, icon: Int, text: String) {/**/
}
#Composable
fun VerticalGrid( //fun <T> VerticalGrid(
data: List<Pair<Resource, Int>>, //List<T>,
columnCount: Int,
itemContent: #Composable (Modifier, Int, String) -> Unit
) {
val size = data.size
val rows = if (size == 0) 0 else 1 + (size - 1) / columnCount
for (rowIndex in 0..rows) {
val itemIndex = rowIndex * columnCount
Row {
val end = min(itemIndex + columnCount, size)
for (index in itemIndex until end) {
itemContent(
Modifier.weight(1f),
data[index].first.image,
data[index].second.toString()
)
}
}
}
}
Usage
VerticalGrid(data = listOf(), columnCount = 10) { modifier, icon, text ->
IconText(modifier, icon, text)
}
Or
VerticalGrid(data = listOf(), columnCount = 10) { modifier, icon, text ->
Tex(modifier, text)
}
Or
VerticalGrid(data = listOf(), columnCount = 10) { modifier, icon, text ->
IconText(modifier, icon, text)
Tex(modifier, text)
}
With last one you need to consider how you set Modifier. Since it's a Row under the hood. If first Composable covers whole space second one won't be visible
With generic function
#Composable
fun <T> VerticalGrid(
data: List<T>,
columnCount: Int,
itemContent: #Composable (Modifier, T) -> Unit
) {
val size = data.size
val rows = if (size == 0) 0 else 1 + (size - 1) / columnCount
for (rowIndex in 0..rows) {
val itemIndex = rowIndex * columnCount
Row {
val end = min(itemIndex + columnCount, size)
for (index in itemIndex until end) {
itemContent(Modifier.weight(1f), data[index])
}
}
}
}
Usage
val list: List<Pair<Resource, Int>> = listOf(
Pair(Resource(1), 1)
)
VerticalGrid(
data = list,
columnCount = 10
) { modifier: Modifier, pair: Pair<Resource, Int> ->
IconText(
modifier = modifier,
icon = pair.first.image,
text = pair.second.toString()
)
}