[英]Make a Row of rotated Text in Jetpack compose
I want to make a Row
of -90 degrees rotated Text
Composables to make something like below:我想制作一Row
-90 度旋转的Text
组合来制作如下所示的内容:
However this code ( repro case ):但是此代码(复制案例):
@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,
)
}
}
produces this:产生这个:
The Row
uses old width of Text
composables (the width of non-rotated Text) to place them one after another. The Row
使用Text
可组合项的旧宽度(非旋转文本的宽度)将它们一个接一个地放置。
Where is the reason of this problem?这个问题的原因在哪里?
You can try using it in a Column
and then rotating that Column
by -90f
:您可以尝试在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
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.