Jetpack Compose - 立柱 - 重心

Question

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

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

原文由 mac229 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

 @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 发布，翻译遵循 CC BY-SA 4.0 许可协议