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

Make a Row of rotated Text in Jetpack compose(在Jetpack Compose中制作一行旋转文本)

本文介绍了在Jetpack Compose中制作一行旋转文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想制作一个旋转-90度的RowText合成物,做成如下所示:

但是此代码(再现大小写):

@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可组合元素的旧宽度(非旋转文本的宽度)逐个放置它们。

此问题的原因是什么?

推荐答案

您可以尝试在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
    )
}

这篇关于在Jetpack Compose中制作一行旋转文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:在Jetpack Compose中制作一行旋转文本

基础教程推荐