无法将盒子垂直居中放入列中

Question

我试图在 Jetpack 中对齐一个 Box，它在一列的垂直中心包含 2 个图标

盒子部件的代码是：

@Composable
    private fun passwordValidate() {
        Box(){
            Image(painter = painterResource(id = R.drawable.ic_checkmark), contentDescription = "" )
            Image(painter = painterResource(id = R.drawable.ic_xmark), contentDescription = "" ) 
        }
    }

盒子被加载到一个列中，donc如下：


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 字段对齐

有什么想法吗？

Answer 1

您的 Column 换行内容大小。所以它的大小等于图标大小，这就是为什么 Column 排列不起作用的原因。

你可以将 fillMaxHeight() 修饰符传递给 Column 来解决这个问题，但实际上你不需要 Column 这里，因为你只有一个 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 children 与 verticalAlignment 参数居中：

Row(
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier.padding(top = 20.dp)
) {
    Column(
        modifier = Modifier
            .weight(0.95f)
    ) {
        passwordField()
    }
    passwordValidate(
        Modifier
            .weight(0.05f)
    )
}

使用 align 修饰符使特定 child 居中。

passwordValidate(
    Modifier
        .weight(0.05f)
        .align(Alignment.CenterVertically)
)

无法将盒子垂直居中放入列中

Impossible to center vertically a box into a column

android

kotlin

android-jetpack

android-jetpack-compose