在 Jetpack compose 中制作一行旋转文本

Question

我想制作一个 -90 度的 Row 旋转 Text 组合物，以制作如下所示的内容：

但是此代码（重现案例）：

@Preview(showBackground = true, backgroundColor = 0xffffffff)
@Composable
fun Preview_Row_With_Rotated_Text() {
    Row {
        Text(
            text = "A text",
            modifier = Modifier
                .padding(2.dp)
                .rotate(-90f),
            maxLines = 1,
        )
        Text(
            text = "A text which is a bit longer",
            modifier = Modifier
                .padding(2.dp)
                .rotate(-90f),
            maxLines = 1,
        )
        Text(
            text = "A text which is kinda longer than previous one",
            modifier = Modifier
                .padding(2.dp)
                .rotate(-90f),
            maxLines = 1,
        )
    }
}

产生这个：

Row 使用旧的 Text 组合宽度（非旋转文本的宽度）将它们一个接一个放置。

这个问题的原因在哪里？

Answer 1

您可以尝试在 Column 中使用它，然后通过 Column 旋转该 -90f：

@Composable
fun Main() {
    Column(
        modifier = Modifier
            .width(200.dp)
            .rotate(-90f)
    ) {
        MyText(text = "Financial Advice")
        MyText(text = "Strategy and Marketing")
        MyText(text = "Information Technology")
    }
}

@Composable
fun MyText(text: String) {
    Text(
        text = text,
        modifier = Modifier
            .padding(4.dp)
            .fillMaxWidth()
            .background(MaterialTheme.colors.secondary)
            .padding(16.dp),
        textAlign = TextAlign.Center,
        maxLines = 1
    )
}