Jetpack Compose - 立柱 - 重心答案

【问题标题】：Jetpack Compose - Column - Gravity centerJetpack Compose - 立柱 - 重心
【发布时间】：2020-04-29 23:10:50
【问题描述】：

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

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

【问题讨论】：

标签： android kotlin android-jetpack android-jetpack-compose

【解决方案1】：

你可以使用these parameters:

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

【讨论】：

如果您使用的是行，有什么想法可以将它们对齐，以便一个可组合函数位于开头，另一个位于中心？类似于 css 的 flexbox 中的 spaceEvenly 或颤振 api.flutter.dev/flutter/widgets/Row-class.html 中的 Row 小部件，您可以使用 mainAxisAlignment.spaceEvenly
@PeterHaddad developer.android.com/reference/kotlin/androidx/compose/… 并查看此帖子：joebirch.co/android/exploring-jetpack-compose-column
我在align 上遇到错误，但我将jetpack compose 依赖项更新为1.0.0-alpha03 并且它工作正常。以前是1.0.0-alpha02 谢谢！
您可以简单地使用Modifier.fillMaxSize() 而不是Modifier.fillMaxWidth().fillMaxHeight()
@GabrieleMariotti 也许题外话了，但你如何将文本“TopAppBar”在图像中居中？这实际上就是我在这里的原因:)

【解决方案2】：

使用这个

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

【讨论】：

这个绝对是可以使用的，最新版本的 Composable 1.0.0 和更多

【解决方案3】：

你可以使用

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

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

【讨论】：

Modifier.align 仅适用于BoxScope

【解决方案4】：

您可以选择对单个项目应用重力，如下所示，然后它将使项目居中。

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

【讨论】：

这个答案已被弃用，因为Text 现在不允许Gravity
Text(text = item.title, modifier = Modifier.gravity(Alignment.CenterHorizontally))
使用alpha07，使用Text(text = item.title, modifier = Modifier.align(Alignment. CenterHorizontally))
Text 的修饰符 align 不存在 1.0.0-beta09Compose 版本。
上述建议不起作用（至少在 Compose 1.0.0 中），但这样做：style = TextStyle(textAlign = TextAlign.Center)

【解决方案5】：

我不太喜欢它，但这对我有用：

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

编写 1.0.0-beta07

【讨论】：

Modifier.fillMaxSize() 而不是 Modifier.fillMaxWidth().fillMaxHeight()

【解决方案6】：

您可以使用 Column(crossAxisAlignment = CrossAxisAlignment.Center) 。它像重力一样工作。

【讨论】：

不幸的是它在 dev-03 中不可用
与 Flutter 而非 JetpackCompose 相关

【解决方案7】：

您可以使用Arrangement.Center

将子组件放置在靠近主轴中心的位置

示例代码

@Composable
fun Column(

    arrangement: Arrangement = Arrangement.Center,

)

【讨论】：

【解决方案8】：

如果您使用lazyColumn 加载列表并希望使整个项目居中你可以用这个

LazyColumn( horizontalAlignment = Alignment.CenterHorizontally) {

}

【讨论】：

【解决方案9】：

您可以使用 FlexColumn 将内容置于中心，因为它支持 CrossAxisAlignment。

FlexColumn(crossAxisAlignment = CrossAxisAlignment.Center) {
    inflexible {
        Text(text = item.title)
        Text(text = item.description)
    }
}

在不灵活的内部扭曲它，这样小部件就不会占据整个屏幕。

如果您想使用 FlexColumn 将视图带到屏幕中心，则与使用 mainAxisAlignment 和 crossAxisAlignment 的方式相同

FlexColumn(mainAxisAlignment = MainAxisAlignment.Center,
        crossAxisAlignment = CrossAxisAlignment.Center) {
    inflexible {
        Text(text = item.title)
        Text(text = item.description)
    }
}

【讨论】：

【解决方案10】：

从最新版本的 compose(0.1.0-dev05) 开始，您就是这样做的

要使该容器内的文本居中，您需要使用LayoutAlign 修饰符。

Column(modifier = LayoutWidth.Fill + LayoutAlign.Center) {
    Text(text = item.title)
    Text(text = item.description)
}

【讨论】：

【解决方案11】：

如果您使用0.1.0-dev09，您可以使用参数horizontalGravity和verticalArrangement修改重力或排列属性

@Composable
fun centeredColumn() {
    return Column (
        modifier = Modifier.height(100.dp), 
        horizontalGravity = Alignment.CenterHorizontally, 
        verticalArrangement = Arrangement.Center
    ) {
            Image(asset = imageResource(id = R.drawable.ic_emojo_logo_white))
            Text(text = stringResource(id = R.string.login_subtitle))
    }
}

【讨论】：

【解决方案12】：

水平居中

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

在父表面中水平和垂直居中

Column(modifier = Modifier.fillMaxWidth().fillMaxHeight(), verticalArrangement = Arrangement.Center) {
        Text(text = item.title)
        Text(text = item.description)
 }

【讨论】：

【解决方案13】：

使用

modifier = Modifier.align(Alignment.CenterHorizontally)

【讨论】：

非常适合按钮！

【解决方案14】：

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

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

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

【讨论】：

这在其他答案中已经提到过，比如stackoverflow.com/a/66391295/2227743
测试集heightIn(min = 40.dp) 并看到它只是水平居中

【解决方案15】：

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

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

【讨论】：