Jetpack Compose旋转Column内Text被裁剪，如何适配窄Column布局

Jetpack Compose 中的 rotate 修饰符属于绘制阶段变换，仅修改最终的绘制效果，不会改变组件的测量逻辑和父布局传递的约束规则。你将根 Column 宽度限制为 200.dp 后，父布局的默认裁剪边界就只有 200.dp 宽，旋转后的文本长度超出了这个边界，哪怕你给内部旋转的 Column 设置了更大的宽度，也会被父布局裁掉。
之前使用 fillMaxWidth 时父布局宽度为屏幕宽度，裁剪边界足够容纳旋转后的文本，所以可以完整显示。

以下两种方案都可以实现你需要的侧边垂直 AppBar 效果：

方案1：关闭父布局裁剪 + 强制设置组件宽度 #

给根 Column 关闭裁剪，同时给旋转的组件用 requiredWidth 绕过父布局的宽度约束：

@Composable
private fun SideAppBar(title: String) {
    Column(
        Modifier
            .width(200.dp)
            .fillMaxHeight()
            .background(Color.White)
            .clipToBounds(false) // 关闭父布局默认裁剪
    ) {
        BoxWithConstraints(
            modifier = Modifier.fillMaxSize()
        ) {
            val parentHeight = maxHeight
            Column(
                Modifier
                    .rotate(-90f)
                    .height(200.dp)
                    .requiredWidth(parentHeight), // 强制设置宽度，不受父布局200.dp限制
                verticalArrangement = Arrangement.Center
            ) {
                Text(
                    text = title,
                    modifier = Modifier
                        .fillMaxWidth()
                        .wrapContentHeight()
                        .padding(end = 10.dp),
                    maxLines = 1,
                    textAlign = TextAlign.End
                )
            }
        }
    }
}

方案2：自定义变换调整偏移 #

直接通过 graphicsLayer 同时设置旋转和偏移，不需要修改父布局属性：

@Composable
private fun SideAppBar(title: String) {
    Column(
        Modifier
            .width(200.dp)
            .fillMaxHeight()
            .background(Color.White)
    ) {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = title,
                modifier = Modifier
                    .graphicsLayer {
                        rotationZ = -90f
                        // 调整偏移量让旋转后的文本居中
                        translationY = size.width / 2 - size.height / 2
                        translationX = size.height / 2 - size.width / 2
                    }
                    .wrapContentSize(),
                maxLines = 1,
                overflow = TextOverflow.Ellipsis // 超长可显示省略号
            )
        }
    }
}

如果需要文本自动适配宽度不截断，可以使用 Compose Material3 内置的自动字号调整功能，给 Text 配置 autoSizeMinTextSize、autoSizeMaxTextSize 等属性即可。

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