A modern programming language that makes developers happier.

kotlinlang

Bildschirmfoto 2023-05-18 um 11.49.45.png

Hi - I am having some problems in optimizing the layout as given in the attached screenshot. Requirements are:

• the button on the bottom should always be visible there
• the table (directly above the button) may contain multiple entries (in the current layout I can scroll this table - but well, only having one item visible is not quite amusing)
• The gray button (“Details ein-/ausblenden”) toggles visibility of everything below (excluding the bottom button of course)
My problems are:

• the table should not be scrollable but instead
• the whole area starting with the red box and ending with the table should be vertically scrollable
I already tried with `BoxWithConstraints` - but whatever I am doing: preview tells me something about infinite and such when adding `verticalScroll` .

This is my current code:

```@Composable
fun ParcelInfo(
    modifier: Modifier = Modifier,
    navigator: INavigationProvider? = null,
    uiState: IViewState.Data&lt;ParcelInfoViewState&gt;
) {
    var expanded by remember { mutableStateOf(true) }

    Column(modifier.fillMaxSize(), Arrangement.SpaceBetween, Alignment.Start) {
        Column(Modifier.fillMaxWidth().weight(1f)) {
            ParcelInfoHeaderData(data = uiState.value.parcelInfo)

            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .minimumInteractiveComponentSize(),
                colors = ButtonDefaults.buttonColors(
                    backgroundColor = colorResource(R.color.lightGray),
                    contentColor = colorResource(R.color.grayed)
                ),
                onClick = {
                    expanded = !expanded
                }
            ) {
                Text(text = stringResource(R.string.toggleDetails))
            }
            AnimatedVisibility(visible = expanded) {
                ParcelInfoDetailData(data = uiState.value.parcelInfo)
            }
        }
        Button(
            modifier = Modifier
                .fillMaxWidth()
                .minimumInteractiveComponentSize(),
            onClick = {
                navigator?.navigateUp()
            }
        ) {
            Text(text = stringResource(R.string.back))
        }
    }
}```


Did you try adding a `.verticalScroll()` modifier to the inner `Column`?

If you did and that's what's giving the error you mentioned, you need to make sure nothing inside has a `.fillMaxHeight()` modifier or something along those lines.

OK - deeply nested inside I have used `.fillMaxSize` for some `Box` nested within a `Row` with modifier `height(intrinsicSize = IntrinsicSize.Max)` to achieve equal height for all boxes within a row

e.g. the table view (which is a `LazyColumn`)

To do what you're saying, I don't think the table can be lazy. Use `Column` for the table. Alternatively, put the header information inside the `LazyColumn` of the table.

Not related to your problem, but I'm currently working on a similar project. I made a data table library if you're interested in it. <https://github.com/sproctor/compose-data-table> It doesn't yet support lazy composition (or much of anything), but it does handle flexible column widths.

I’ll check out your component, thanks…

Anyway - you pointed me into the right direction. Even after removing all `fillMaxSize` it didn’t work - until I changed the `LazyColumn`used in the list to a `Column`with a `.forEach` inside. As the displayed data is already know in its full extend at display time, this is absolutely OK for me. And after that change I was able to successfully implement the `BoxWithConstraint`and `verticalScroll`