I try to get a layout of my app for the whole wind...

# compose-desktop

[Dirk Hoffmann]

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 ???

[Adam Powell]

Modifier.weight

[Dirk Hoffmann]

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)

[Dirk Hoffmann]

the weight always seems to be the weight of "the whole window", independent of how much space "surrounding" components already "have eaten up"

[Adam Powell]

weighted children in a row or column are always measured last

[Adam Powell]

after other siblings have been measured

[Dirk Hoffmann]

which Modifier.weight(...) Method are you referring to, mine doesn't have one!?!?

[Adam Powell]

it's there if you are inside a Row or Column content block, by way of the RowScope or ColumnScope receiver

[Dirk Hoffmann]

ah, ok ... weight stretches vertically (eating up the height
how can I achieve the same with eating up horizontal width space?

[Dirk Hoffmann]

message has been deleted

[Dirk Hoffmann]

@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())
        }
    }
}

[Dirk Hoffmann]

how do I get instead of "Center"'s Modifier.width(300dp) to eat it up "as much width as there is' ?

[Dirk Hoffmann]

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))
    }
}

[Dirk Hoffmann]

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!