I once had to deal with a screen that painted several nested lists dynamically, using generic types, quite complex due to the way it was built and also using the hybrid XML + Jetpack Compose system, so in the end I ended up using a composable list, or at least that was the solution I found by reusing the pieces I had available.

But again, in most cases this approach will be the exception or you will probably come up with other solutions.

Composables list

In this example, the UI will receive three values ​​that will be emitted every second:

private val viewTypeState: MutableState<ViewType?> = mutableStateOf(null)

init {
  emitViewTypes()
}

private fun emitViewTypes() {
  lifecycleScope.launch {
    delay(1_000)
    viewTypeState.value = ViewType.Header
    delay(1_000)
    viewTypeState.value = ViewType.Body
    delay(1_000)
    viewTypeState.value = ViewType.Footer
  }
}

The list will be dynamically created in the UI and displayed like this:

@Composable
private fun RenderViews() {
    val views: MutableList<@Composable () -> Unit> = remember {
        mutableListOf()
    }

    viewTypeState.value?.let { viewType ->
        val view = getView(text = viewType.title)
        views.add(view)

        Column(
            verticalArrangement = Arrangement.spacedBy(16.dp),
            modifier = Modifier.padding(16.dp),
        ) {
            views.forEach { view ->
                view()
            }
        }
    }
}

@Composable
private fun getView(text: String): @Composable () -> Unit {
    return {
        Text(text = text)
    }
}

That is, the getView() method returns a composable lambda that, when invoked, will display a text view.

And the RenderViews() method goes through the list of views, invoking them item by item, to display the views on the screen.

When running the above code, it looks like the result will be this:

But it actually shows:

So what’s going on?

Reference in memory of lambdas

What happens is that every time the lambda is invoked, the same reference is obtained in memory, so:

1. The Header is emitted, the view with the header is added to the list, and the Header view is displayed.
2. The Body is emitted, the view with the body is added to the list, and the Body view is displayed twice, since the first item that had the value of Header now has the value of Body.
3. The Footer is emitted, the view with the Footer is added to the list, and the Footer view is displayed three times, since the first item and the second item that had the value of Body now have the value of Footer.

And so on, the last value emitted is added to the list and affects the previous elements, since the list lambdas have the same reference, so they will always render the same view (Text) with a different value (title):

@Composable
private fun RenderViews() {
    val views: MutableList<@Composable () -> Unit> = remember {
        mutableListOf()
    }

    when (val viewType = viewTypeState.value) {
        ViewType.Body -> {
            val view = getView(text = viewType.title)
            views.add(view)
        }

        ViewType.Footer -> {
            val view = getView(text = viewType.title)
            views.add(view)
        }

        ViewType.Header -> {
            val view = getView(text = viewType.title)
            views.add(view)
        }

        null -> Unit
    }

    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp),
        modifier = Modifier.padding(16.dp),
    ) {
        views.forEach { view ->
            view()
        }
    }
}

Thus, calling the getView() method generates different instances:

. . .

This article is previously published on proandroiddev.com.