logo标签列表

Jetpack Compose - 列表 - 居中对齐

androidkotlinandroid-jetpack-composeandroid-jetpackandroid-jetpack-compose-layout
150

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

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

如果你正在使用lazyColumn加载列表，并且想要使整个项目居中，你可以使用以下代码：

LazyColumn( horizontalAlignment = Alignment.CenterHorizontally) {

}
3

如果您正在使用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))
    }
}
2
使用
modifier = Modifier.align(Alignment.CenterHorizontally)
非常适用于按钮！ - Ray Hunter
2
 Column(
     modifier = Modifier.fillMaxSize(),
     verticalArrangement = Arrangement.Center,
     horizontalAlignment = Alignment.CenterHorizontally
     ){
       // Child Composable Here Like Text, Row, Box, Image ... more 
     }

verticalArrangement -> 将所有子组件垂直居中对齐到列（父组件）

horizontalAlignment -> 将所有子组件水平居中对齐到列（父组件）

1

更新：此答案已过时。

您可以使用Column(crossAxisAlignment = CrossAxisAlignment.Center)。它的工作原理类似于重力。

4
很遗憾，在dev-03中这个不可用。 - mac229
5
好的，请提供需要翻译的具体内容。 - Lokik Soni
1

水平居中

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

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

这是最新版本的compose(0.1.0-dev05)的操作方法

如果您想将文本居中在此容器内，您需要使用LayoutAlign修饰符。

Column(modifier = LayoutWidth.Fill + LayoutAlign.Center) {
    Text(text = item.title)
    Text(text = item.description)
}
0
Text(
    textAlign = TextAlign.Center,
    text = "We are making some improvements. Please, try again later."
)
1
感谢您对Stack Overflow社区做出贡献的兴趣。这个问题已经有很多答案了，其中一个答案已经得到社区的广泛验证。您确定您的方法之前没有被提到过吗？如果是这样的话，解释一下您的方法有何不同，什么情况下您的方法可能更好，并且为什么您认为之前的答案不够满意，这将非常有帮助。您可以编辑您的答案并提供解释吗？ - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接