我正在尝试在 Jetpack 中对齐一个 Box,其中一个列的垂直中心包含 2 个图标
Box 部分的代码是:
@Composable
private fun passwordValidate() {
Box(){
Image(painter = painterResource(id = R.drawable.ic_checkmark), contentDescription = "" )
Image(painter = painterResource(id = R.drawable.ic_xmark), contentDescription = "" )
}
}
该框加载在一列中,如下所示:
Row(Modifier.padding(top = 20.dp)) {
Column(modifier = Modifier
.weight(0.95f)) {
passwordField()
}
Column(modifier = Modifier <------ Box part to be centered
.weight(0.05f),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally) {
passwordValidate()
}
}
现在它看起来像这样:
我故意将红十字和绿色检查图像放在另一个顶部。因为我只显示一个或另一个,但我无法让它们在列中居中以与 EMAIL 字段对齐
任何的想法 ?
您的Column
包装内容大小。所以它的大小等于图标大小,这就是Column
排列不起作用的原因。
你可以将fillMaxHeight()
修饰符传递给 theColumn
来解决这个问题,但实际上你不需要Column
here,因为你里面只有一个 child( Box
)。将修饰符作为参数传递给passwordValidate
:
@Composable
private fun passwordValidate(modifier: Modifier) {
Box(modifier){
Image(painter = painterResource(id = R.drawable.ic_checkmark), contentDescription = "" )
Image(painter = painterResource(id = R.drawable.ic_xmark), contentDescription = "" )
}
}
然后选择以下两项之一:
Row
孩子与verticalAlignment
参数居中:Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(top = 20.dp)
) {
Column(
modifier = Modifier
.weight(0.95f)
) {
passwordField()
}
passwordValidate(
Modifier
.weight(0.05f)
)
}
align
修饰符将特定孩子居中。passwordValidate(
Modifier
.weight(0.05f)
.align(Alignment.CenterVertically)
)
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句