Jetpack Compose中旋转文本位置异常及裁剪问题求助

问题出在直接对Text使用rotate时，Compose会先按文本原始水平布局的尺寸完成测量，再执行视觉旋转，导致旋转后的文本和父容器的布局约束不匹配，出现位置偏移或裁剪。

方案一：用内层Box包裹Text后再旋转 #

把Text放在一个内层Box中，让内层Box先适配文本的原始尺寸，再对整个Box执行旋转，最后依靠外层Box的居中对齐来定位，就能解决位置和裁剪问题：

Box(
    modifier = Modifier
        .fillMaxWidth()
        .fillMaxHeight(0.2f)
        .clip(RoundedCornerShape(5.dp))
        .shadow(5.dp)
        .background(Color(0xFFD88EDD))
) {
    Box(
        modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth(0.12f)
            .background(Color(0xFFC27FC6)),
        contentAlignment = Alignment.Center
    ) {
        // 内层Box包裹Text，先适配文本尺寸再旋转
        Box(
            modifier = Modifier
                .rotate(-90f)
                .background(Color.Red)
        ) {
            Text(
                text = "27 DECC",
                color = Color.White,
                fontWeight = FontWeight.Bold,
                fontFamily = fontFamily,
                fontSize = 13.sp
            )
        }
    }
}

方案二：自定义Layout交换宽高约束 #

如果需要更精细的控制，可以用layout modifier手动交换文本的宽高约束，让布局系统按旋转后的尺寸来测量，避免裁剪：

Box(
    modifier = Modifier
        .fillMaxWidth()
        .fillMaxHeight(0.2f)
        .clip(RoundedCornerShape(5.dp))
        .shadow(5.dp)
        .background(Color(0xFFD88EDD))
) {
    Box(
        modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth(0.12f)
            .background(Color(0xFFC27FC6)),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "27 DECC",
            color = Color.White,
            fontWeight = FontWeight.Bold,
            fontFamily = fontFamily,
            fontSize = 13.sp,
            modifier = Modifier
                .layout { measurable, constraints ->
                    // 旋转90度后，文本的宽高需要交换，所以修改约束
                    val placeable = measurable.measure(
                        constraints.copy(
                            maxWidth = constraints.maxHeight,
                            maxHeight = constraints.maxWidth
                        )
                    )
                    // 按交换后的宽高布局，并调整位置居中
                    layout(placeable.height, placeable.width) {
                        placeable.place(
                            x = (placeable.height - placeable.width) / 2,
                            y = (placeable.width - placeable.height) / 2
                        )
                    }
                }
                .rotate(-90f)
                .background(Color.Red)
        )
    }
}

这两种方案都能解决你遇到的位置偏移和文本裁剪问题，优先尝试第一种，实现更简单直观。

内容的提问来源于stack exchange，提问作者Егор Сауткин