如何使用 Jetpack Compose 垂直堆叠文本并旋转？答案

【问题标题】：How to stack Text vertically with rotation using Jetpack Compose?如何使用 Jetpack Compose 垂直堆叠文本并旋转？
【发布时间】：2020-10-27 06:25:58
【问题描述】：

尝试对齐文本元素，如下图所示：

如何在 Jetpack Compose 中进行操作？

通常我会使用垂直方向的线性布局和带有rotation of 90 的TextViews。想知道如何在 compose 中实现这一点。

【问题讨论】：

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

【解决方案1】：

我没有找到在轮换后拥有“wrap_content”的方法，但我希望它有所帮助：

Column (...) {
    Text("Element 1",
        style = TextStyle(textAlign = TextAlign.Center),
        modifier = Modifier
        .drawBackground(color = Color.Red)
        .padding(16.dp)
        .size(20.dp, 100.dp)
        .drawLayer(
            rotationZ = -90f
        )
        .size(100.dp, 20.dp)
    )
}

【讨论】：

它确实有效，谢谢！它是前进的指针。 Wrap_content 是在此解决方案之上接下来要解决的问题。

【解决方案2】：

compose_verion：1.0.0-beta02

要旋转元素，您可以使用Modifier.rotate() 修饰符

Column {
     Text(text = "text", modifier = Modifier.rotate(-90f))
     Text(text = "text", modifier = Modifier.rotate(-90f))
     Text(text = "text", modifier = Modifier.rotate(-90f))
}

【讨论】：

【解决方案3】：

带有来自How to show vertical text with proper size/layout in jetpack compose 的自定义修饰符的解决方案对我有用：

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)
        )
    }
}

用作

Text(
    modifier = Modifier.vertical().rotate(-90f),
    text = "Vertical aligned element"
)

感谢Sergei S's answer。

【讨论】：