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

本教程将介绍在Jetpack Compose中制作一行旋转文本的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

在Jetpack Compose中制作一行旋转文本 教程 第1张

问题描述

我想制作一个旋转-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中制作一行旋转文本的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。