Jetpack Compose - 柱 - 重心

Question

我正在使用 Jetpack Compose 创建一个布局，并且有一列。我想要此列中的中心项目：

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

Answer 1

您可以使用

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

• textAlign 用于对齐框内的文本。
• Modifier.align() 用于对齐列内的文本框

Answer 2

有了1.0.x 您可以使用这些参数：

• 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 (  ) { ... }

Answer 3

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

Answer 4

用这个

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

Answer 5

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

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

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

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

Answer 7

我不太喜欢它，但这就是它对我的作用：

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

编写1.0.0-beta07

Answer 8

您还可以使用可组合的textAlign属性Text

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