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

Question

我如何使用Text组合函数垂直对齐文本？ 是否有一种方法可以在不添加其他视图来包含 Text的情况下完成这项任务。 Text的textAlign参数只有以下选项：Left、Right、Center、Justify、Start和End。我尝试使用textAlign = TextAlign.Center，但它仅水平居中，如何在不将其包装在另一个视图中的情况下使其垂直居中？

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

结果：

我想要实现的目标：

- danartillaga

---

发布您的代码和您想要实现的图像。 - Gabriele Mariotti

没有容器是做不到的。 - Phil Dukhov

Gabriele Mariotti，我编辑了这个问题。 - danartillaga

Philip Dukhov，啊好的谢谢，那么现在我的唯一选择就是将它包装在另一个视图中，例如一个Box。 - danartillaga

Answer 1

你需要使用一个父容器来对其内部的内容进行对齐。

例如，使用一个Box：

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

或者一个列：

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

- Gabriele Mariotti

---

类型不匹配。 需要： Alignment.Horizontal 发现： Arrangement.HorizontalOrVertical - Android Dev

“VerticalArrangement” 似乎没有任何作用。 - IgorGanapolsky

@IgorGanapolsky verticalArrangement 定义了 Column 布局中子元素的垂直排列方式。同时也要检查父容器的高度。 - Gabriele Mariotti

Answer 2

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

- The MJ

Answer 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")
}

- evaristokbza

Answer 4

我在这里提出了相同的问题，使用视图时可以使用android:gravity参数，如PhilipDukhov所回答的那样，仅使用Text不可能实现对齐到底部左侧或右侧，您需要另一个容器，最好是Box来对齐Text组件。

- Thracian

Answer 5

创建一个简单的可组合函数，将任何内容显示在中心：

@Composable
fun Center(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit,
) {
    Box(
        modifier = modifier,
        contentAlignment = Alignment.Center
    ) {
        content()
    }
}

从任何其他函数中调用它：

@Composable
fun CenterAlignedText() {
    Center(Modifier.fillMaxSize()) {
        Text("Hello World!")
    }
}

- Vikas Patidar