I am trying to build the following layout:
I have the following code so far:
Column(
modifier = Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState())
.padding(8.dp)
) {
//First Row
WidgetComposed(
Modifier
.fillMaxWidth()
.height(300.dp),
bgColor = Color.Red,
widgetName = "Widget 1"
)
Spacer(modifier = Modifier.height(8.dp))
// Second Row
Row(modifier = Modifier
.fillMaxWidth()
.wrapContentHeight(), horizontalArrangement = Arrangement.SpaceBetween) {
WidgetComposed(
Modifier
.fillMaxWidth(0.6f)
.aspectRatio(2f / 3f, true),
bgColor = Color.Green,
widgetName = "Widget 2 (2:3)"
)
Spacer(modifier = Modifier.width(8.dp))
Column(modifier = Modifier
.fillMaxHeight()) {
WidgetComposed(
Modifier
.fillMaxWidth()
.weight(1f),
bgColor = Color.Blue,
widgetName = "Widget 3"
)
Spacer(modifier = Modifier.height(8.dp))
WidgetComposed(
Modifier
.fillMaxWidth()
.weight(1f),
bgColor = Color.Cyan,
widgetName = "Widget 4"
)
}
}
It gives me this:
The column with Widget 3 and 4 does not fill the height of the parent row. If I put hardcoded height value it works.
Aspect ration and 60% width is important to keep for Widget 2.
WidgetCompose is just a card and a box:
@Composable
fun WidgetComposed(modifier: Modifier = Modifier, bgColor: Color, widgetName: String) {
Card(modifier = modifier, shape = RoundedCornerShape(8.dp), backgroundColor = bgColor) {
Box(modifier = Modifier.padding(16.dp), contentAlignment = Alignment.Center) {
Text(text = widgetName)
}
}
}
How can I make the column with Widget 3 and 4 automatically fill the available height? Preferably without using .onGloballyPositioned modifier
You can use:
Row(
modifier = Modifier
.fillMaxWidth()
.height(IntrinsicSize.Min),
horizontalArrangement = Arrangement.SpaceBetween
) {
WidgetComposed(
Modifier
.weight(0.6f)
.aspectRatio(2f / 3f, true),
//...
)
Spacer(modifier = Modifier.width(8.dp).fillMaxHeight())
Column(
modifier = Modifier
.weight(0.4f)
.fillMaxHeight()
) {
//..
}
}