如何在 Jetpack Compose 中将文本垂直对齐到顶部、底部和中心？答案

【问题标题】：How to align Text to Top, Bottom and Center Vertically in Jetpack Compose?如何在 Jetpack Compose 中将文本垂直对齐到顶部、底部和中心？
【发布时间】：2021-10-29 07:23:02
【问题描述】：

如何使用Text 可组合函数垂直对齐文本。有没有办法做到这一点，而不必添加另一个额外的视图来包含Text。

Text 的textAlign 参数只有以下选项：

TextAlign.

左
对
居中
证明
开始
结束

我尝试过使用textAlign = TextAlign.Center，但它只是水平居中。如何在不将其包裹在另一个视图中的情况下将其垂直居中？

Text(
    text = "Text",
    modifier = Modifier.size(100.dp),
    textAlign = TextAlign.Center
)

结果：

我想要达到的目标：

【问题讨论】：

发布您的代码和您想要实现的目标的图像。
不，没有容器你不能这样做。
Gabriele Mariotti，我编辑了问题
Philip Dukhov，嗯，好的，谢谢，所以我现在唯一的选择就是将其包装在另一个视图中，例如 Box

标签： android android-jetpack-compose

【解决方案1】：

您必须使用父容器。

例如：

Box( 
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Center
) {
    Text(
        text = "Text",
    )
}

或：

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text(
        text = "Text",
    )
}

【讨论】：

【解决方案2】：

我问了同样的问题here，这是通过使用视图的android:gravity 参数完成的，正如PhilipDukhov 所回答的那样，仅使用Text 是不可能的，你需要有另一个容器，最好是Box 来对齐@987654325 @组件里面。

【讨论】：

【解决方案3】：

没有看到你的代码很难给出准确的答案，但我想说你需要使用容器的Alignment.CenterVertically而不是TextAlign

类似：

Row {
    Text(
        text = "Text",
        modifier = Modifier.align(alignment = Alignment.CenterVertically)
    )

    Image(
        ...
    )
}

或：

Column(
    modifier = Modifier
        .align(Alignment.CenterVertically)
) {
    Text(text = "Text")
    Text(text = "Text 2")
}

【讨论】：

【解决方案4】：

首先在修饰符中使用.wrapContentHeight()，然后可以使用align(CenterVertically)参数使文本居中。

【讨论】：