11mo ago

Put part of a LazyColumn under a Card

I have a screen where I want a lazy-loading card of various items below some necessary information, all of which will scroll down. My initial approach was to nest the lazycolumn under the card which is nested under a Column with a calculated nested height based on the size of the calls list. However, I can't do that, and neither can I do the following.

    
@Composable
@Preview
fun mockup() {
    val calls = mutableStateListOf(Pair(1..418, 418 downTo 1))
    MaterialTheme {
        LazyColumn(Modifier.verticalScroll(rememberScrollState())) {
            item {
                Text("Text and some necessary UI elements")
                Slider(value = .418f, onValueChange = {})
            }
            Card(Modifier.fillMaxWidth()) {
                items(calls.asReversed()) {
                    Row {
                        Text(it.first.toString(), Modifier.fillMaxWidth(0.5f), fontWeight = FontWeight.Black)
                        Text(it.second.toString(), Modifier.fillMaxWidth(0.5f))
                    }
                }
            }
        }
    }
}

I found https://stackoverflow.com/questions/68182413/compose-lazylist-section-background, for which the only viable solution found was to hack a special composable widget so that when combined, it looks like a continuous card. Still, I want to see if there's a "proper way" of doing this...

No comments