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)
)
}
In this case, the RectangleScreen appears at the top of the screen with a square shape.
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)
)
}
In this case, the RectangleScreen also has a square shape, but it is positioned in the center of the screen.
My Understanding
code 1 :
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).
Why i get square rectangle on top ?
code 2 :
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 .
why position of square is in middle of screen
My Questions:
Why does the square shape appear at the top of the screen in Code 1?
Why does the square appear in the center of the screen in Code 2?
How are the size and position calculated in both cases?
1