Dirk Hoffmann
01/20/2021, 3:50 PMColumn {
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
01/20/2021, 3:55 PMModifier.weight
Dirk Hoffmann
01/20/2021, 3:56 PMAdam Powell
01/20/2021, 3:58 PMDirk Hoffmann
01/20/2021, 4:19 PMModifier.weight(...)
Method are you referring to, mine doesn't have one!?!?Adam Powell
01/20/2021, 4:21 PMRow
or Column
content block, by way of the RowScope
or ColumnScope
receiverDirk Hoffmann
01/20/2021, 4:26 PM@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())
}
}
}
Modifier.width(300dp)
to eat it up "as much width as there is' ?@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))
}
}