[英]How to show vertical text with proper size/layout in jetpack compose
如何正確旋轉jetpack compose中的文本並使其進行正確的布局? 當我在文本 object 上使用rotate
修飾符時,文本被旋轉,但布局中占用的大小似乎使用了預旋轉的文本寬度。
這是我想要完成的一個簡單示例 - 垂直文本應該在狹窄空間的左側:
@Composable
fun MainBox() {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
modifier = Modifier.padding(4.dp).background(Color.Gray),
text = "This is at the top"
)
Row(
modifier = Modifier.fillMaxWidth().weight(1f),
verticalAlignment = Alignment.CenterVertically
) {
Text(
modifier = Modifier.padding(4.dp).rotate(-90f),
text = "This should be vertical text on the left side"
)
Text(
modifier = Modifier.fillMaxSize().background(Color.Yellow),
textAlign = TextAlign.Center,
text = "This is a big yellow box that should take up most of the space"
)
}
}
}
然而,這表明了這一點。
如果我縮短豎排文本中的文本,它只占用一個狹窄的空間,看起來更像我想要的布局。
有沒有辦法攔截布局過程或其他一些設置來固定大小,以便垂直文本只占用一個文本行的水平空間寬度,但仍然適應用戶字體大小的變化(所以沒有固定大小)?
我的版本。 經過幾次測試,它似乎工作得很好
class ComposeActivity7 : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeTutorialTheme {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
modifier = Modifier
.padding(4.dp)
.background(Color.Gray),
text = "This is at the top"
)
Row(
modifier = Modifier
.fillMaxWidth()
.weight(1f),
verticalAlignment = Alignment.CenterVertically
) {
Text(
modifier = Modifier
.vertical()
.rotate(-90f)
.background(Color.Gray)
.padding(4.dp),
text = "This should be vertical text on the left side"
)
Text(
modifier = Modifier
.fillMaxSize()
.background(Color.Yellow),
textAlign = TextAlign.Center,
text = "This is a big yellow box that should take up most of the space"
)
}
}
}
}
}
}
fun Modifier.vertical() =
layout { measurable, constraints ->
val placeable = measurable.measure(constraints)
layout(placeable.height, placeable.width) {
placeable.place(
x = -(placeable.width / 2 - placeable.height / 2),
y = -(placeable.height / 2 - placeable.width / 2)
)
}
}
結果
稍微改進的 Sergei S 變體,它適用於具有Modifier.high(Intrinsic.X)
的父母:
fun Modifier.rotateVertically(rotation: VerticalRotation) = then(
object : LayoutModifier {
override fun MeasureScope.measure(measurable: Measurable, constraints: Constraints): MeasureResult {
val placeable = measurable.measure(constraints)
return layout(placeable.height, placeable.width) {
placeable.place(
x = -(placeable.width / 2 - placeable.height / 2),
y = -(placeable.height / 2 - placeable.width / 2)
)
}
}
override fun IntrinsicMeasureScope.minIntrinsicHeight(measurable: IntrinsicMeasurable, width: Int): Int {
return measurable.maxIntrinsicWidth(width)
}
override fun IntrinsicMeasureScope.maxIntrinsicHeight(measurable: IntrinsicMeasurable, width: Int): Int {
return measurable.maxIntrinsicWidth(width)
}
override fun IntrinsicMeasureScope.minIntrinsicWidth(measurable: IntrinsicMeasurable, height: Int): Int {
return measurable.minIntrinsicHeight(height)
}
override fun IntrinsicMeasureScope.maxIntrinsicWidth(measurable: IntrinsicMeasurable, height: Int): Int {
return measurable.maxIntrinsicHeight(height)
}
})
.then(rotate(rotation.value))
enum class VerticalRotation(val value: Float) {
CLOCKWISE(90f), COUNTER_CLOCKWISE(270f)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.