Jetpack Compose - 列 - 重心

Question

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

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

Answer 1

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

Answer 2

您可以使用Arrangement.Center

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

示例代码

@Composable
fun Column(

    arrangement: Arrangement = Arrangement.Center,

)

Answer 3

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

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

Answer 4

您可以使用 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)
    }
}

Answer 5

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

要使文本在此容器中居中，您需要使用 LayoutAlign 修饰符。

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

Answer 6

如果您使用的是0.1.0-dev09，您可以使用参数horizontalAlignment和verticalArrangement

修改重力或排列属性

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

Answer 7

您可以使用 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 (  ) { ... }

Answer 8

水平居中

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

Answer 9

您可以使用

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

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

Answer 10

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

LazyColumn( horizontalAlignment = Alignment.CenterHorizontally) {

}

Answer 11

使用

modifier = Modifier.align(Alignment.CenterHorizontally)

Answer 12

我不太喜欢它，但这就是它对我有用的地方：

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

编写 1.0.0-beta07

Answer 13

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

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

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

Answer 14

使用这个

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

Answer 15

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

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

Jetpack Compose - 列 - 重心

Jetpack Compose - Column - Gravity center

android

kotlin

android-jetpack

android-jetpack-compose