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

Question

我想要制作一个Row-90 度旋转的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

您可以尝试在 a 中使用它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
    )
}