Actually i am reading this answer , but there is not enough information about aspect ratio .
RectangleScreen :
@Composable
fun RectangleScreen(modifier: Modifier) {
Canvas(modifier.border(7.dp , color = Color.Red)) {
drawRect(
Color.Black
)
}
}
Code 1 :
setContent {
RectangleScreen(modifier = Modifier
.aspectRatio(1.0f)
.border(7.dp , Color.Magenta)
.fillMaxSize()
.border(7.dp , Color.Yellow )
.padding(64.dp)
.border(7.dp , Color.Blue)
)
}
Output :
Code 2 :
setContent {
RectangleScreen(modifier = Modifier
.fillMaxSize()
.border(7.dp , Color.Magenta)
.aspectRatio(1.0f)
.border(7.dp , Color.Yellow )
.padding(64.dp)
.border(7.dp , Color.Blue)
)
}
Output :
In code 1 : I think i understand what is happening ?
as height and width are not specify before aspectRatio(1f) and by default matchHeightConstraintsFirst: Boolean = false , so it again attempt to size content by incoming constraint by first check Constraint.MaxWidth then Constraint.MaxHeight and then for minWidth then minHeight so none of constraints are valid so at ends so the constraints will not be respected and the content will be sized such that the Constraints. maxWidth or Constraints. maxHeight is matched (depending on matchHeightConstraintsFirst).
In code 2 : what i understand?
as height and width are specify before aspectRatio(1f) and by default matchHeightConstraintsFirst: Boolean = false , so it attempt to size content to match specified aspect ratio as 1f , by trying to match one of the incoming constraints so the first constraint is Constraint.MaxWidth which let say is 1080.dp so to maintain aspect ratio like height : width equal to 1:1 so our height will be 1080.dp so we get square shape .
I do not understand how size of content is measure and position in Code 1 and code 2 and i do not know my small above understanding is correct or not ?