我使用的是新品牌Kotlin Compose
,我有一行包含2个商品,如何使它们像center-vertical
一样?
Row(
modifier = Spacing(20.dp)
) {
Text(text = "Hello $name!")
Spacing(10.dp)
Padding(padding = 25.dp) {
Button(text = "Click", onClick = { /*do something*/ })
}
}
请注意,如果没有填充,它们也不会对齐。
答案 0 :(得分:3)
Row 中有 verticalAlignment
参数。您还可以使用覆盖行的 verticalAlignment
的 align 修饰符单独配置项目对齐方式。例如:
@Composable
fun RowAlignmentExample() {
Row(verticalAlignment = Alignment.CenterVertically) {
SizeTile(14)
SizeTile(18)
SizeTile(22)
SizeTile(26)
SizeTile(10, modifier = Modifier.align(Alignment.Top))
SizeTile(10, modifier = Modifier.align(Alignment.Bottom))
}
}
@Composable
fun SizeTile(fontSize: Int, modifier: Modifier = Modifier) {
Text(
text = fontSize.toString(),
fontSize = fontSize.sp,
modifier = modifier
.padding(2.dp)
.background(Color.White, RoundedCornerShape(4.dp))
.padding(2.dp)
)
}
答案 1 :(得分:1)
在撰写版本dev-14上,这是一个解决方案...
Row(
modifier = Modifier.padding(20.dp),
verticalGravity = Alignment.CenterVertically
) {
Text(text = "Hello Android!",
modifier = Modifier.padding(end = 10.dp))
Button(text = { Text("Click") },
onClick = { /*do something*/ },
modifier = Modifier.padding(25.dp)
)
}
答案 2 :(得分:1)
通过1.0.0-alpha03
,您可以使用类似的内容:
Row(
modifier = Modifier.padding(20.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text(text = "Hello!")
Spacer(modifier = Modifier.width(10.dp))
Button(onClick = { /*do something*/ },
modifier = Modifier.padding(25.dp)) {
Text(text = "Click")
}
}
答案 3 :(得分:0)
您可以使用Align
组合式
Align(Alignment.TopCenter) { //You can change the alignment to fit your needs.
Row(modifier = Spacing(20.dp)) {
Text(text = "Hello $name!")
Spacing(10.dp)
Padding(padding = 25.dp) {
Button(text = "Click", onClick = { /*do something*/ })
}
}
}
上面的代码应该对齐整行,但是如果要使每个组件相对于row.
居中对齐,则需要单独包装每个组件。
答案 4 :(得分:0)
在 1.0.1 中,您可以像这样使用 verticalArrangement:
Row(
Modifier
.fillMaxWidth()
.height(70.dp),
verticalArrangement = Arrangement.Center
) {
...
}