升级Jetpack Compose后可缩放图片忽略父Box组件尺寸问题

将Jetpack Compose从1.0.1升级到1.3.0-beta01后，自定义的ZoomRotationImage不再遵守父Box的250x250尺寸限制，缩放时甚至会超出TopAppBar范围，核心原因是Compose版本升级后，图形变换的默认裁剪行为发生调整——默认不会自动裁剪超出父布局边界的内容。

修复方案 #

给父Box组件添加裁剪修饰符，确保子组件超出容器范围的部分被自动裁剪：

修改后的父Box代码：

Box(
    modifier = Modifier
        .height(250.dp)
        .width(250.dp)
        .clip(RectangleShape) // 新增裁剪修饰符，约束内容在容器内
) {
    ZoomRotationImage(screenState.customImageURI)
}

备选方案 #

也可以直接在ZoomRotationImage的graphicsLayer中开启裁剪，确保图片变换后不会超出自身布局边界：

修改ZoomRotationImage中的graphicsLayer配置：

.graphicsLayer {
    translationX = -offset.x * zoom
    translationY = -offset.y * zoom
    scaleX = zoom
    scaleY = zoom
    rotationZ = angle
    transformOrigin = TransformOrigin(0f, 0f)
    clipToBounds = true // 开启裁剪
}

两种方案都能解决问题，推荐使用父Box添加裁剪的方式，这样能统一约束容器内所有子元素的显示范围。

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