Jetpack Compose缩放时如何控制组件对齐方式

一、让组件按缩放后的尺寸布局（修改布局测量逻辑） #

scale属于绘制阶段的变换，不会影响布局测量环节，所以默认会保留原始尺寸的布局占用空间。要实现按缩放后尺寸布局+缩放内部内容，可以通过layout修饰符自定义布局逻辑，在测量后调整布局尺寸，同时在绘制时缩放内容：

@Composable
@Preview
fun ScaleTest() {
    Box(
        Modifier
            .fillMaxWidth()
            .aspectRatio(1f),
        contentAlignment = Alignment.Center
    ) {
        Box(Modifier.size(200.dp).background(Color.Red))
        
        // 自定义layout实现缩放且按缩放后尺寸布局
        Box(
            modifier = Modifier
                .size(200.dp)
                .layout { measurable, constraints ->
                    val placeable = measurable.measure(constraints)
                    // 计算缩放后的布局尺寸
                    val scaledWidth = (placeable.width * 0.8f).toInt()
                    val scaledHeight = (placeable.height * 0.8f).toInt()
                    // 告知布局系统使用缩放后的尺寸
                    layout(scaledWidth, scaledHeight) {
                        // 绘制时缩放内容，原点对齐左上角
                        placeable.placeRelativeWithLayer(0, 0) {
                            scaleX = 0.8f
                            scaleY = 0.8f
                        }
                    }
                }
                .background(Color.Green)
        )
    }
}

二、保持原布局尺寸，调整对齐让绿色盒子与红色盒子顶部对齐 #

如果不需要改变布局占用空间，仅需让缩放后的绿色盒子与红色盒子顶部对齐，可以通过计算偏移量配合offset修饰符实现：scale默认以组件中心为原点缩放，所以需要向上偏移(原始尺寸 - 缩放后尺寸)/2的距离，抵消中心缩放带来的偏移：

@Composable
@Preview
fun ScaleTest() {
    Box(
        Modifier
            .fillMaxWidth()
            .aspectRatio(1f),
        contentAlignment = Alignment.Center
    ) {
        Box(Modifier.size(200.dp).background(Color.Red))
        
        val scaleFactor = 0.8f
        val size = 200.dp
        // 计算顶部对齐所需的偏移量：向上偏移(原始尺寸 - 缩放后尺寸)/2
        val offsetY = (size * (1 - scaleFactor) / 2).unaryMinus()
        
        Box(
            Modifier
                .size(size)
                .scale(scaleFactor)
                .offset(y = offsetY)
                .background(Color.Green)
        )
    }
}

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