如何解决Jetpack Compose中旋转可组合项的布局间隙问题？

问题核心是旋转与尺寸交换的顺序、约束传递错误导致布局间隙。以下是修复后的实现：

修改后的完整代码 #

@Composable
fun Layout() {
    Row(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Red)
    ) {
        Row(modifier = Modifier.fillMaxSize()) {
            // 调整Modifier顺序：先swapDimensions再rotate
            Box(
                modifier = Modifier
                    .weight(1f)
                    .fillMaxSize()
                    .swapDimensions()
                    .rotate(90f)
                    .background(Color.LightGray)
            ) {
                Column(modifier = Modifier.fillMaxSize()) {
                    Column(modifier = Modifier.background(Color.Magenta).fillMaxWidth()) {
                        Text(text = "All content in this box has to be rotated 90deg")
                    }
                    Column(modifier = Modifier.background(Color.LightGray).weight(1f)) {
                        Text(text = "Text 2")
                    }
                }
            }

            // 右侧两列保持不变
            Column(
                modifier = Modifier
                    .weight(1f)
                    .fillMaxSize()
            ) {
                Box(
                    modifier = Modifier
                        .weight(1f)
                        .fillMaxSize()
                        .background(Color.Green)
                ) {
                    Text(text = "This content is normal")
                }
                Box(
                    modifier = Modifier
                        .weight(1f)
                        .fillMaxSize()
                        .background(Color.Yellow)
                ) {
                    Text(text = "This content is normal")
                }
            }
            Column(
                modifier = Modifier
                    .weight(1f)
                    .fillMaxSize()
            ) {
                Box(
                    modifier = Modifier
                        .weight(1f)
                        .fillMaxSize()
                        .background(Color.Magenta)
                ) {
                    Text(text = "This content is normal")
                }
                Box(
                    modifier = Modifier
                        .weight(1f)
                        .fillMaxSize()
                        .background(Color.Blue)
                ) {
                    Text(text = "This content is normal")
                }
            }
        }
    }
}

// 修改swapDimensions逻辑：传递交换后的约束给子元素
fun Modifier.swapDimensions() = layout { measurable, constraints ->
    // 交换约束的宽高，让子元素按照旋转后的可用空间测量
    val swappedConstraints = constraints.copy(
        minWidth = constraints.minHeight,
        maxWidth = constraints.maxHeight,
        minHeight = constraints.minWidth,
        maxHeight = constraints.maxWidth
    )
    val placeable = measurable.measure(swappedConstraints)

    // 布局尺寸使用交换后的宽高
    layout(placeable.height, placeable.width) {
        // 调整位置，确保旋转后内容完全填充容器
        placeable.place(0, 0)
    }
}

@Preview(
    name = "Landscape Preview",
    device = "spec:width=800dp, height=400dp",
    showBackground = true
)
@Composable
fun PreviewLayout() {
    Layout()
}

关键修改说明 #

• Modifier顺序调整：将swapDimensions()移到rotate(90f)之前，先完成尺寸交换的布局计算，再应用旋转，避免布局偏移。
• 约束传递修正：在swapDimensions中，先交换约束的宽高参数，让子元素按照旋转后的空间需求进行测量，确保内容填充整个可用区域。
• 内容填充优化：给旋转列内的Column添加fillMaxSize()，并给第二个子Column设置weight(1f)，让内容自动填充剩余空间。

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