Jetpack Compose中Modifier顺序为何影响aspectRatio的定位与尺寸？

我之前查阅了相关内容，但关于aspectRatio的细节信息不够充分，以下是我的测试场景与疑问：

自定义Composable #

@Composable
fun RectangleScreen(modifier: Modifier) {
    Canvas(modifier.border(7.dp , color = Color.Red)) {
        drawRect(
            Color.Black
        )
    }
}

测试场景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)
    )
}

现象：RectangleScreen以正方形形态显示在屏幕顶部。

测试场景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)
    )
}

现象：RectangleScreen同样为正方形，但显示在屏幕中央。

我的疑问 #

1. 代码1中正方形为何显示在屏幕顶部？
2. 代码2中正方形为何显示在屏幕中央？
3. 两种场景下尺寸与位置的计算逻辑是怎样的？

解答 #

1. 代码1中正方形居顶的原因 #

Compose的Modifier测量逻辑是从右往左执行，代码1的约束传递与布局流程如下：

• 先通过padding(64.dp)将屏幕可用区域缩小（四周各减64dp），再通过fillMaxSize()要求子元素占满这个缩小后的区域
• 接着执行aspectRatio(1.0f)，由于默认matchHeightConstraintsFirst=false，会以当前可用宽度为基准，将高度强制设置为与宽度相等，形成正方形约束
• 此时正方形的高度小于fillMaxSize()要求的满区域高度，而Compose默认布局容器（根Box）的对齐方式是TopStart，因此正方形会显示在顶部

2. 代码2中正方形居中的原因 #

代码2的Modifier顺序调整后，测量逻辑发生变化：

• 同样先通过padding(64.dp)缩小可用区域，随后执行aspectRatio(1.0f)生成正方形约束
• 最后执行fillMaxSize()，它的作用是让子元素（正方形）在缩小后的可用区域内布局，而根Box的默认对齐方式是Center，因此正方形会被居中放置

3. 两种场景的完整计算逻辑 #

代码1计算流程

1. 屏幕传递原始宽高约束，经border(Blue)、padding(64dp)、border(Yellow)后，得到缩小后的可用宽高约束
2. fillMaxSize()将该约束传递给后续Modifier，要求子元素占满该区域
3. aspectRatio(1.0f)将高度约束强制调整为与宽度相等，生成正方形尺寸传递给RectangleScreen
4. 布局阶段：正方形高度小于fillMaxSize()的可用高度，默认TopStart对齐，最终显示在顶部

代码2计算流程

1. 屏幕传递原始宽高约束，经border(Blue)、padding(64dp)、border(Yellow)后，得到缩小后的可用宽高约束
2. aspectRatio(1.0f)将高度约束调整为与宽度相等，生成正方形约束
3. fillMaxSize()让正方形在缩小后的可用区域内布局，根Box默认Center对齐，最终正方形显示在中央

内容的提问来源于stack exchange，提问作者Maham