我正在使用 Jetpack Compose 创建一个布局，并且有一个列。我想在此列中居中项目：
Column(modifier = ExpandedWidth) {
Text(text = item.title)
Text(text = item.description)
}
问问题
57959 次
15 回答
130
您可以使用这些参数：
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 ( ) { ... }
于 2020-06-02T13:05:43.800 回答
8
用这个
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
)
于 2021-07-13T16:44:58.853 回答
6
您可以使用
Text(
text = item.title,
textAlign = TextAlign.Center,
modifier = Modifier.align(alignment = Alignment.CenterHorizontally)
)
- textAlign 用于对齐框内的文本。
- Modifier.align() 用于对齐列内的文本框
于 2021-02-26T18:51:18.300 回答
4
您可以选择对单个项目应用重力，如下所示，然后它将使项目居中。
Column(modifier = ExpandedWidth) {
Text(modifier = Gravity.Center, text = item.title)
Text(modifier = Gravity.Center, text = item.description)
}
于 2020-01-17T15:37:53.367 回答
4
我不太喜欢它，但这对我有用：
Column(modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center) {
//Your composable elements
}
编写 1.0.0-beta07
于 2021-05-23T03:28:57.430 回答
3
您可以使用Column(crossAxisAlignment = CrossAxisAlignment.Center). 它像重力一样工作。
于 2020-01-13T08:55:52.533 回答
2
您可以使用Arrangement.Center
- 将子组件放置在靠近主轴中心的位置
示例代码
@Composable
fun Column(
arrangement: Arrangement = Arrangement.Center,
)
于 2020-01-13T08:57:20.063 回答
2
如果您使用lazyColumn 加载列表并希望使整个项目居中，您可以使用它
LazyColumn( horizontalAlignment = Alignment.CenterHorizontally) {
}
于 2021-03-01T15:47:32.060 回答
0
您可以使用 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)
}
}
于 2020-01-18T08:17:53.367 回答
0
从最新版本的 compose(0.1.0-dev05) 开始，您就是这样做的
为了使该容器内的文本居中，您需要使用LayoutAlign修饰符。
Column(modifier = LayoutWidth.Fill + LayoutAlign.Center) {
Text(text = item.title)
Text(text = item.description)
}
于 2020-02-27T04:24:44.480 回答
0
如果您正在使用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))
}
}
于 2020-04-25T15:46:22.157 回答
0
水平居中
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)
}
于 2020-09-20T20:50:38.423 回答
0
采用
modifier = Modifier.align(Alignment.CenterHorizontally)
于 2021-05-19T02:59:38.157 回答
0
Text(
"Hello World",
textAlign = TextAlign.Center,
modifier = Modifier.width(150.dp)
)
您可以使用TextAlign属性来居中文本。
于 2021-06-06T15:18:41.947 回答
0
您还可以使用可组合textAlign的属性Text
Text(
modifier = Modifier.fillMaxWidth(),
text = item.title,
textAlign = TextAlign.Center
)
Text(
modifier = Modifier.fillMaxWidth(),
text = item.description,
textAlign = TextAlign.Center
)
于 2022-02-20T14:01:48.877 回答