Jetpack Compose - 列表 - 居中对齐

Question

我正在使用Jetpack Compose创建一个布局，其中包含一列。我希望将此列中的项目居中：

 Column(modifier = ExpandedWidth) {
        Text(text = item.title)
        Text(text = item.description)
 }

- mac229

---

Jetpack Compose非常棒，但缺少一些现成的有用组件。 我已经整理了一套免费的Composeables供开发者自由使用， 或者开发者可以提交他们自己的Composeables来分享。目前有15个非常有帮助的Composeables， 附带屏幕截图、代码等。http://composeables.com/ - pstorli

Answer 1

您可以使用这些参数：

• horizontalAlignment = 布局子项的水平对齐方式。
• verticalArrangement = 布局子项的垂直排列方式。

例如：

Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
) {
        Text(
                text = "First item",
                modifier = Modifier.padding(16.dp)
        )
        Text(
                text = "Second item",
                modifier = Modifier.padding(16.dp)
        )
        Text(
                text = "Third item",
                modifier = Modifier.padding(16.dp)
        )
}

如果你只想水平居中，只需使用:

Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
) {
    Column (  ) { ... }

- Gabriele Mariotti

---

我在align上遇到错误，但我将Jetpack Compose依赖更新为1.0.0-alpha03，就解决了。 之前使用的是1.0.0-alpha02，谢谢！ - Peter Haddad

你可以直接使用 Modifier.fillMaxSize() 代替 Modifier.fillMaxWidth().fillMaxHeight()。 - YektaDev

@GabrieleMariotti 或许有些偏题，但是你如何将“TopAppBar”文本居中在你的图片中呢？这其实就是我来这里的原因 :) - Rafael

@Rafael 请查看 https://dev59.com/ZVEG5IYBdhLWcg3wWbBH#67499847 - Gabriele Mariotti

终于有人给出了一个合理的答案。谢谢！ - Joaquin Iurchuk

Answer 2

您可以使用

Text(
  text = item.title,
  textAlign = TextAlign.Center,
  modifier = Modifier.align(alignment = Alignment.CenterHorizontally)
)

• textAlign用于对盒子中的文本进行对齐。
• Modifier.align()用于将文本框在列内对齐。

- Bincy Baby

---

Modifier.align 仅适用于 BoxScope。 - Jim Ovejera

textAlign 是正确的答案。 - Odaym

textAlign = TextAlign.Center 是正确的。请注意它不属于 modifier。 - undefined

Answer 3

通过查看列内对齐视图的所有可能性，您可以在附件中找到详细信息。希望这能帮助您！

- Syed Ibrahim

Answer 4

使用此功能

   Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    )

- Nana kTk

---

这个绝对是要使用的，最新版本的可组合 1.0.0 等。 - thelastworm

Answer 5

Text(
 "Hello World", 
 textAlign = TextAlign.Center,
 modifier = Modifier.width(150.dp)
)

您可以使用TextAlign属性将文本居中。

参考 - https://developer.android.com/jetpack/compose/text

- vibhor chinda

---

这已经在其他答案中提到过，例如 https://dev59.com/_lIH5IYBdhLWcg3wa9lo#66391295。 - Eric Aya

设置 heightIn(min = 40.dp) 并测试其在水平方向上是否居中。 - Amir

Answer 6

或者你可以创建自己的可组合部件，并在任何地方使用它：

@Composable
fun Center( modifier: Modifier = Modifier, content: @Composable ColumnScope.() -> Unit) {
    Column(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        content = content
    )
}

你可以像这样使用：

Center {
    Text(text = "Text 1")
    Text(text = "Text 2")
}

- Amin Keshavarzian

Answer 7

我并不是太喜欢它，但这就是对我有效的方法：

Column(modifier = Modifier.fillMaxSize(),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center) {
                //Your composable elements
            }

Compose 1.0.0-beta07

- ruif3r

---

Modifier.fillMaxSize() instead of Modifier.fillMaxWidth().fillMaxHeight() - Dr.jacky

Answer 8

你也可以使用 Text 组件的 textAlign 属性。

Text(
    modifier = Modifier.fillMaxWidth(),
    text = item.title,
    textAlign = TextAlign.Center
)
Text(
    modifier = Modifier.fillMaxWidth(),
    text = item.description,
    textAlign = TextAlign.Center
)

- Jim Ovejera

Answer 9

您可以通过以下方式对单个元素应用重力，然后它将居中显示。

Column(modifier = ExpandedWidth) {
       Text(modifier = Gravity.Center, text = item.title)
       Text(modifier = Gravity.Center, text = item.description)
}

- Klaas Kabini

---

此答案已过时，因为“Text”现在不允许使用“Gravity”。 - Vipul Asri

Text(text = item.title, modifier = Modifier.gravity(Alignment.CenterHorizontally)) - ByteMe

使用alpha07时，使用Text(text = item.title, modifier = Modifier.align(Alignment.CenterHorizontally))。 - ininmm

Compose的1.0.0-beta09版本中，Text的修饰符align不存在。 - Lucas Sousa

以上的建议（至少在Compose 1.0.0中）无法解决问题，但这个可以： style = TextStyle(textAlign = TextAlign.Center) - Jonik

Answer 10

您可以使用 Arrangement.Center。

• 将子组件尽可能靠近主轴的中心位置

示例代码

@Composable
fun Column(

    arrangement: Arrangement = Arrangement.Center,

)

- AskNilesh