I use a LazyColumnFor with expanding Contents. There are 4 collapsed Items, which will take up the entire screen when expanded. When all items are expanded and the user scrolls to the bottom of the screen, the items at the bottom could be expanded first. The expected (maybe intended) behaviour would be to automatically scroll up to fill the screen with items.

However LazyColumnFor does not automatically scroll up. It leaves some of the screen blank, which is (probably) due to the somewhat lazy measuring of the Layout.

(This behaviour (I think) can also cause issues, such as, when scrolled down, collapsing the topmost item (though I could not make this reproducible in the code sample below). This should be a known bug, but I do have a Stacktrace of it if necessary.)


@Composable
fun SampleApp {
    setContent {
        val data = (1..6).map { "Article $it" }.map{ it to remember { mutableStateOf(false) } }
        Scaffold {
            LazyColumnFor(items = data) {
                val element = it.first
                var extended by it.second
                ListCardElement(onClick = { extended = !extended }) {
                    Column(Modifier.padding(16.dp)) {
                        Column {
                            Text("Element: $element")
                            Text("Some Description")
                            Text("More Decorations")
                        }
                        AnimatedVisibility(visible = extended) {
                            Column {
                                Divider(Modifier.padding(vertical = 8.dp, horizontal = 40.dp))
                                Text("Detailed Description with an entire summary of the main article. This Description should be about 2 sentences long.")
                            }
                        }
                    }
                }
            }
        }
    }
}
@Composable
fun ListCardElement(onClick: (() -> Unit)? = null, content: @Composable () -> Unit) {
    Card(Modifier
        .padding(horizontal = 16.dp)
        .clip(RoundedCornerShape(8.dp))
        .fillMaxWidth()
        .padding(4.dp)
        .run { onClick?.let { clickable(onClick = it) } ?: this }, elevation = 4.dp) {
        content()
    }
}