如何在jetpack compose中显示具有适当大小/布局的垂直文本答案

【问题标题】：How to show vertical text with proper size/layout in jetpack compose如何在jetpack compose中显示具有适当大小/布局的垂直文本
【发布时间】：2022-01-20 03:05:57
【问题描述】：

如何在 jetpack compose 中正确旋转文本并使其做出正确的布局？当我在 Text 对象上使用 rotate 修饰符时，文本会旋转，但布局中占用的大小似乎使用的是预旋转的文本宽度。

这是我想要完成的一个简单示例 - 垂直文本应该沿着左侧的狭窄空间：

@Composable
fun MainBox() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            modifier = Modifier.padding(4.dp).background(Color.Gray),
            text = "This is at the top"
        )

        Row(
            modifier = Modifier.fillMaxWidth().weight(1f),
            verticalAlignment = Alignment.CenterVertically
        ) {

            Text(
                modifier = Modifier.padding(4.dp).rotate(-90f),
                text = "This should be vertical text on the left side"
            )

            Text(
                modifier = Modifier.fillMaxSize().background(Color.Yellow),
                textAlign = TextAlign.Center,
                text = "This is a big yellow box that should take up most of the space"
            )
        }
    }
}

然而，这显示的是这个。

如果我将竖排文本中的文本缩短，它只占用一个狭窄的空间，看起来更像我想要的布局。

有没有办法拦截布局过程或其他一些设置来固定大小，使垂直文本只占用一个文本行的水平空间宽度，但仍然适应用户字体大小的变化（所以没有固定尺寸）？

类似问题here 和here 的答案不能解决此问题或不再有效。

【问题讨论】：

如果你创建了一个自定义布局？ -> developer.android.com/codelabs/…
@F.Mysir 我按照相同的示例尝试了该操作，只是交换了宽度和高度，但文本随后完全消失了。不过，这似乎是一条可行的道路——我只是不知道该怎么做。

标签： android android-jetpack-compose android-jetpack

【解决方案1】：

我的版本。经过几次测试，它似乎工作得很好

class ComposeActivity7 : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            ComposeTutorialTheme {

                Column(
                    modifier = Modifier.fillMaxSize(),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Text(
                        modifier = Modifier
                            .padding(4.dp)
                            .background(Color.Gray),
                        text = "This is at the top"
                    )

                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .weight(1f),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Text(
                            modifier = Modifier
                                .vertical()
                                .rotate(-90f)
                                .background(Color.Gray)
                                .padding(4.dp),
                            text = "This should be vertical text on the left side"
                        )
                        Text(
                            modifier = Modifier
                                .fillMaxSize()
                                .background(Color.Yellow),
                            textAlign = TextAlign.Center,
                            text = "This is a big yellow box that should take up most of the space"
                        )
                    }
                }
            }
        }
    }
}

fun Modifier.vertical() =
    layout { measurable, constraints ->
        val placeable = measurable.measure(constraints)
        layout(placeable.height, placeable.width) {
            placeable.place(
                x = -(placeable.width / 2 - placeable.height / 2),
                y = -(placeable.height / 2 - placeable.width / 2)
            )
        }
    }

结果

【讨论】：

完美！谢谢！

【解决方案2】：

略微改进的 Sergei S 变体，适用于拥有 Modifier.high(Intrinsic.X) 的父母：

fun Modifier.rotateVertically(rotation: VerticalRotation) = then(
    object : LayoutModifier {
        override fun MeasureScope.measure(measurable: Measurable, constraints: Constraints): MeasureResult {
            val placeable = measurable.measure(constraints)
            return layout(placeable.height, placeable.width) {
                placeable.place(
                    x = -(placeable.width / 2 - placeable.height / 2),
                    y = -(placeable.height / 2 - placeable.width / 2)
                )
            }
        }

        override fun IntrinsicMeasureScope.minIntrinsicHeight(measurable: IntrinsicMeasurable, width: Int): Int {
            return measurable.maxIntrinsicWidth(width)
        }

        override fun IntrinsicMeasureScope.maxIntrinsicHeight(measurable: IntrinsicMeasurable, width: Int): Int {
            return measurable.maxIntrinsicWidth(width)
        }

        override fun IntrinsicMeasureScope.minIntrinsicWidth(measurable: IntrinsicMeasurable, height: Int): Int {
            return measurable.minIntrinsicHeight(height)
        }

        override fun IntrinsicMeasureScope.maxIntrinsicWidth(measurable: IntrinsicMeasurable, height: Int): Int {
            return measurable.maxIntrinsicHeight(height)
        }
    })
    .then(rotate(rotation.value))

enum class VerticalRotation(val value: Float) {
    CLOCKWISE(90f), COUNTER_CLOCKWISE(270f)
}

【讨论】：