Jetpack Compose中组件rotate旋转后fillMaxSize填充父布局失效问题

如何在旋转Composable组件的同时，让组件仍能正确填充其父布局？
举例场景：实现一个填满整个屏幕的Column，内部包含两个各占一半高度的Box，直接给Box加rotate(90f)旋转后填充效果异常，Box的尺寸是旋转操作前计算的，没有适配旋转后的状态。

初始问题代码：

Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(8.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            Box(
                modifier = Modifier
                    .rotate(90f)
                    .fillMaxSize()
                    .weight(1f)
                    .background(Color.Red),
                contentAlignment = Alignment.Center
            ) {
                Text("1", fontSize = 100.sp)
            }
            Box(
                modifier = Modifier
                    .rotate(90f)
                    .fillMaxSize()
                    .weight(1f)
                    .background(Color.Blue),
                contentAlignment = Alignment.Center
            ) {
                Text("2", fontSize = 100.sp)
            }
}

初始异常效果：

尝试用BoxWithConstraints手动交换宽高后，效果有改善但尺寸仍有异常，布局检查器确认BoxWithConstraints本身尺寸是正确的：

Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        BoxWithConstraints(modifier = Modifier.fillMaxSize().weight(1f)) {
            Box(
                modifier = Modifier
                    .rotate(90f)
                    .width(maxHeight)
                    .height(maxWidth)
                    .background(Color.Red),
                contentAlignment = Alignment.Center
            ) {
                Text("1", fontSize = 100.sp)
            }
        }
        BoxWithConstraints(modifier = Modifier.fillMaxSize().weight(1f)) {
            Box(
                modifier = Modifier
                    .rotate(90f)
                    .width(maxHeight)
                    .height(maxWidth)
                    .background(Color.Blue),
                contentAlignment = Alignment.Center
            ) {
                Text("2", fontSize = 100.sp)
            }
        }

半修正后的效果：

• Modifier.rotate()属于图形层绘制Modifier，只会在最终绘制阶段对组件内容做旋转变换，完全不会影响组件的布局测量、尺寸计算、实际占位，所以直接在旋转后调用fillMaxSize，拿到的是旋转前的布局约束，自然无法匹配旋转后的填充需求。
• 半修正版本的问题有两个：一是Modifier顺序错误，把rotate()放在了尺寸设置前面；二是没有将交换宽高后的Box在父容器中居中，导致旋转后组件偏移，无法对齐父布局边界。
• BoxWithConstraints获取到的maxWidth/maxHeight已经是父布局扣除padding、间距后分配给当前子项的可用尺寸，不需要额外手动扣减数值。

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(8.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    // 第一个红色旋转块
    BoxWithConstraints(
        modifier = Modifier
            .weight(1f)
            .fillMaxWidth()
    ) {
        Box(
            modifier = Modifier
                // 先设置旋转后需要的尺寸：宽高互换
                .width(maxHeight)
                .height(maxWidth)
                // 居中放置，保证旋转后刚好对齐父布局边界
                .align(Alignment.Center)
                // 尺寸确定后再执行旋转，不影响布局测量
                .rotate(90f)
                .background(Color.Red),
            contentAlignment = Alignment.Center
        ) {
            Text("1", fontSize = 100.sp)
        }
    }

    // 第二个蓝色旋转块
    BoxWithConstraints(
        modifier = Modifier
            .weight(1f)
            .fillMaxWidth()
    ) {
        Box(
            modifier = Modifier
                .width(maxHeight)
                .height(maxWidth)
                .align(Alignment.Center)
                .rotate(90f)
                .background(Color.Blue),
            contentAlignment = Alignment.Center
        ) {
            Text("2", fontSize = 100.sp)
        }
    }
}

• Modifier链的执行顺序直接影响最终效果：所有布局相关Modifier（size、width、height、weight、padding、align等）必须放在rotate/scale/translate这类图形变换Modifier之前，避免测量和绘制逻辑错位。
• 90度、270度旋转需要填充父布局的场景，通用处理逻辑都是：先拿到父布局的可用宽高，给子组件设置互换后的宽高值，居中后再执行旋转，即可实现旋转后完美填充无溢出。
• 0度、180度旋转不需要交换宽高，因为旋转前后组件的宽高占位没有变化。

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