[英]How to align row elements by the baseline in Jetpack Compose
How to align elements inside a Row
by the baseline.如何按基线对齐
Row
内的元素。 My issue is that I want to have a Row
element with multiple Text
elements and each of the Text
elements will have different font and size.我的问题是我想要一个包含多个
Text
元素的Row
元素,并且每个Text
元素都将具有不同的字体和大小。 By default, they are aligned on the top.默认情况下,它们在顶部对齐。 I need them to be aligned on the bottom.
我需要它们在底部对齐。 This is the code:
这是代码:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MaterialTheme {
Row {
Text(
text = "Abrakadabra",
style = TextStyle(fontSize = 22.sp, fontWeight = FontWeight.Bold)
)
Text(
text = "Abrakadabra",
style = TextStyle(fontSize = 14.sp, fontWeight = FontWeight.Bold)
)
}
}
}
}
}
Here is the rendered view of the code:这是代码的呈现视图:
In Jetpack Compose 1.0.0
it can be done in this way:在 Jetpack Compose
1.0.0
,可以通过以下方式完成:
Row {
Text(
text = "One",
fontSize = 20.sp,
modifier = Modifier.alignByBaseline()
)
Text(
text = "Two",
fontSize = 12.sp,
modifier = Modifier.alignByBaseline()
)
}
Result:结果:
If someone wants to align text to the last baseline when using multiline Text
it can be done by using Modifier.alignBy(LastBaseline)
如果有人想在使用多行
Text
时将文本与最后一个基线对齐,可以使用Modifier.alignBy(LastBaseline)
来完成
Row {
Text(
text = "Line 1\nLine 2",
fontSize = 20.sp,
modifier = Modifier.alignBy(LastBaseline)
)
Text(
text = "Line 3",
fontSize = 12.sp,
modifier = Modifier.alignBy(LastBaseline)
)
}
目前,使用 Jetpack Compose 1.0.0-alpha03
,您可以通过以下方式实现:
Text(modifier = Modifier.alignWithSiblings(FirstBaseline), ...)
I'm not at all proud of this;我一点也不为此感到自豪。 I'm just reporting.
我只是报道。 The answers listed on stackoverflow ( use
Modifier.alignBy(LastBaseline)
, wrap Text() inside of a Box() and use Modifier.align(Alignment.BottomStart)
) didn't work for me. stackoverflow 上列出的答案(使用
Modifier.alignBy(LastBaseline)
,将 Text() 包装在 Box() 内并使用Modifier.align(Alignment.BottomStart)
)对我不起作用。 Probably because I'm using an onTextLayout
callback.可能是因为我正在使用
onTextLayout
回调。
Until I can find something way less hacky, this will get me what I want.直到我能找到不那么老套的东西,这会让我得到我想要的。
@Composable
fun ForceTextToBottom(){
val density=LocalDensity.current
var offset by remember{mutableStateOf(0.dp)}
var aHeightThatIAlreadyKnowInAdvance=100.dp
Column{
//some stuff before the stubborn Text()
Row{//the parent of the stubborn Text()
Image{//the sibling of the stubborn Text()
Text(sentence, //This is the stubborn Text()
...
...
modifier=Modifier
.height(aHeightThatIAlreadyKnowInAdvance)
.offset(y=offset)
...
...
onTextLayout={textLayoutResult->
//Some layout size correction logic
offset=with(density){100.dp-textLayoutResult.getLineBottom(textLayoutResult.lineCount-1).toDp()}
}
)
}
}
}
}
Not anything I'm happy about.没有什么让我高兴的。 But it gets the text to align to the bottom.
但它使文本与底部对齐。
Hello here is the best answer你好这里是最佳答案
Row(verticalAlignment = Alignment.Bottom ) {
Text(
text = "One",
fontSize = 20.sp,
)
Text(
text = "Two",
fontSize = 12.sp,
)
}
By using verticalAlignment and horizontalArrangement in a Row or horizontalAlignment and verticalArrangement in a Column you can control the position easy, and there is a lot of options that you need to take a look on them as an example for Row you can use verticalAlignment = Alignment.Bottom
or verticalAlignment = Alignment.Top
or verticalAlignment = Alignment.Center
通过在行中使用verticalAlignment和horizontalArrangement或在列中使用horizontalAlignment和verticalArrangement,您可以轻松控制位置,并且您需要查看很多选项作为Row的示例,您可以使用
verticalAlignment = Alignment.Bottom
或verticalAlignment = Alignment.Top
或verticalAlignment = Alignment.Center
Add the following modifier to both the Text composables and that should take care of it.将以下修饰符添加到两个 Text 可组合项中,这应该会处理它。 Here is the code for your reference
这是供您参考的代码
Text(..., modifier = LayoutGravity.RelativeToSiblings(alignmentLine = FirstBaseline))
Text(..., modifier = LayoutGravity.RelativeToSiblings(alignmentLine = FirstBaseline))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.