https://kotlinlang.org logo
Title
d

Dirk Hoffmann

01/20/2021, 3:50 PM
I try to get a layout of my app for the whole window like:
Column {
    header() { }
    Row {
       leftBar() { }
       centerContent() { }
       rightBar() { }
    }
    footer() { }
}
where header, left/rightBar and footer "eat up" as much height as these components are (means whatever is in in them) and taking the center content "eat up the rest" of available window space. So that if I resize the window, header/footer height and left/rightBar width stay fixed (size depends only on their contents) but centerContent() stretches/expands to get all the new available space on resizing. Whenever I give the centerContent
fillxxxSize()
it also eats up the space of the components below/toTheRight, which then are no more visible. What's the way to have a component eat up all the space there is for it, but no more concerning components below beside it ???
a

Adam Powell

01/20/2021, 3:55 PM
Modifier.weight
d

Dirk Hoffmann

01/20/2021, 3:56 PM
but then I have to set a weight on all the surrounding components also, right? and I want to have e.g. header and footer the height whatever they need, and give Center Row all the "left over" space (correspondingly with the width inside the row)
the weight always seems to be the weight of "the whole window", independent of how much space "surrounding" components already "have eaten up"
a

Adam Powell

01/20/2021, 3:58 PM
weighted children in a row or column are always measured last
after other siblings have been measured
d

Dirk Hoffmann

01/20/2021, 4:19 PM
which
Modifier.weight(...)
Method are you referring to, mine doesn't have one!?!?
a

Adam Powell

01/20/2021, 4:21 PM
it's there if you are inside a
Row
or
Column
content block, by way of the
RowScope
or
ColumnScope
receiver
d

Dirk Hoffmann

01/20/2021, 4:26 PM
ah, ok ... weight stretches vertically (eating up the height how can I achieve the same with eating up horizontal width space?
@Composable
fun MyLayout() {
    Column() {
        Wrap("TopRootContent") {
            Text("TopRootContent", Modifier.fillMaxWidth())
        }
        Row(
            modifier = Modifier
                .padding(4.dp)
                .weight(1f),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Wrap("Left") { Text("Left", Modifier.weight(1f)) }
            Wrap("Center") {
                Card(Modifier.weight(1f)) {
                    Text("Center Content", Modifier.width(300.dp))
                }
            }
            Wrap("Right") { Text("Right", Modifier.weight(1f)) }
        }
        Wrap("BottomRootContent") {
            Text("BottomRootContent", Modifier.fillMaxWidth())
        }
    }
}
how do I get instead of "Center"'s
Modifier.width(300dp)
to eat it up "as much width as there is' ?
finally "kind of" figured it out:
@Composable
fun MyLayout() {
    Column(Modifier.border(1.dp, color = Color.Green)) {
        // Top
        Card(
            Modifier.fillMaxWidth(),
            border = BorderStroke(1.dp, color = Color.Gray)
        ) {
            Text("TopRootContent", Modifier.padding(4.dp))
        }

        // Center
        Row(modifier = Modifier.weight(1f)) {
            // Left
            Text("Left", Modifier.padding(4.dp).width(150.dp).border(1.dp, color = Color.Gray).fillMaxHeight())

            // Center
            Column(Modifier.weight(1f).border(1.dp, Color.Magenta)) {
                Card(Modifier.weight(1f)) {
                    Text("Center Content", Modifier.padding(4.dp).fillMaxWidth().border(1.dp, Color.Yellow))
                }
            }

            // Right
            Text("Right", Modifier.padding(4.dp).width(150.dp).border(1.dp, color = Color.Gray).fillMaxHeight())
        }

        // Bottom
        Text("BottomRootContent", Modifier.padding(4.dp).fillMaxWidth().border(1.dp, color = Color.Gray))
    }
}
thanx for the hint with weight ... didn't work for me because I didn't understood up to then, that in ColumnScope weight deals with vertical height in RowScope weight deals with horizontal width learned something!