Jetpack Compose中Modifier.rotate()布局足迹及自适应布局方案咨询

解决方案 #

核心思路是在布局测量阶段就计算出组件变换后的实际尺寸，让父布局基于这个尺寸做自适应。以下是两种可行方法：

方法1：自定义Modifier.layout()处理旋转布局 #

通过自定义布局修饰符，在测量阶段计算旋转后的组件边界，让父布局感知到变换后的真实尺寸：

import androidx.compose.ui.geometry.Rect
import androidx.compose.ui.graphics.transform.rotate

fun Modifier.rotateWithLayout(degrees: Float) = layout { measurable, constraints ->
    // 先测量原始组件尺寸
    val placeable = measurable.measure(constraints)
    
    // 计算旋转后的组件边界矩形
    val originalRect = Rect(0f, 0f, placeable.width.toFloat(), placeable.height.toFloat())
    val rotatedRect = originalRect.rotate(degrees)
    
    // 用旋转后的尺寸作为布局的实际尺寸
    layout(rotatedRect.width.roundToInt(), rotatedRect.height.roundToInt()) {
        // 调整组件位置，让旋转后的组件在布局范围内居中
        val offsetX = (rotatedRect.width - placeable.width) / 2f - rotatedRect.left
        val offsetY = (rotatedRect.height - placeable.height) / 2f - rotatedRect.top
        placeable.place(offsetX.roundToInt(), offsetY.roundToInt())
    }
}

使用方式：

setContent {
    Column(
        modifier = Modifier.fillMaxHeight(),
        verticalArrangement = Arrangement.Bottom,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(fontSize = 30.sp, text = "Hello")
        Box {
            Canvas(
                modifier = Modifier
                    .size(100.dp)
                    .rotateWithLayout(45f)
            ) {
                drawRect(Color.Red)
            }
        }
    }
}

方法2：结合graphicsLayer与wrapContentSize #

graphicsLayer可以控制变换是否影响布局，通过设置旋转参数并配合wrapContentSize，让父容器自适应变换后的尺寸：

setContent {
    Column(
        modifier = Modifier.fillMaxHeight(),
        verticalArrangement = Arrangement.Bottom,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(fontSize = 30.sp, text = "Hello")
        Box(modifier = Modifier.wrapContentSize()) {
            Canvas(
                modifier = Modifier
                    .size(100.dp)
                    .graphicsLayer {
                        rotationZ = 45f
                        // 让布局阶段感知到变换后的尺寸
                        updateLayerProperties()
                    }
            ) {
                drawRect(Color.Red)
            }
        }
    }
}

注：单独使用wrapContentSize无效，必须配合graphicsLayer在布局阶段暴露变换后的边界，才能让父容器正确自适应。

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