https://kotlinlang.org logo
Title
m

Mario Adam

05/18/2023, 9:56 AM
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<ParcelInfoViewState>
) {
    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))
        }
    }
}
s

Sean Proctor

05/18/2023, 12:48 PM
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.
m

Mario Adam

05/18/2023, 1:28 PM
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
)
s

Sean Proctor

05/18/2023, 1:35 PM
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.
m

Mario Adam

05/19/2023, 7:17 AM
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