Jetpack Compose中如何让Column内的Box实现垂直居中对齐？

问题根因 #

右侧Column默认高度为适配自身内容高度，未和左侧密码输入框所在列的高度保持一致，导致垂直居中配置仅在自身小范围高度内生效，无法和左侧输入框对齐。

解决方案 #

方案1：保留现有嵌套结构

给右侧Column添加.fillMaxHeight()修饰符，使其高度和Row高度（由左侧输入框高度撑开）保持一致，垂直居中配置即可正常生效：

Row(Modifier.padding(top = 20.dp)) {
    Column(modifier = Modifier.weight(0.95f)) {
        passwordField()
    }
    Column(modifier = Modifier          
        .weight(0.05f)
        .fillMaxHeight(), // 新增该行，让列高度和Row高度对齐
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally) {
        passwordValidate()
    }
}

方案2：简化嵌套写法（更推荐）

直接移除右侧冗余的Column嵌套，给passwordValidate添加Modifier参数接收外部属性，同时在Row作用域内直接设置垂直居中即可：

1. 首先修改passwordValidate代码，添加Modifier参数和固定尺寸，避免图标偏移：

@Composable
private fun passwordValidate(modifier: Modifier = Modifier) {
    // 可根据实际设计调整Box尺寸
    Box(modifier = modifier.size(24.dp)){
        Image(painter = painterResource(id = R.drawable.ic_checkmark), contentDescription = "", modifier = Modifier.matchParentSize())
        Image(painter = painterResource(id = R.drawable.ic_xmark), contentDescription = "", modifier = Modifier.matchParentSize()) 
    }
}

2. 修改外层布局代码：

Row(Modifier.padding(top = 20.dp)) {
    Column(modifier = Modifier.weight(0.95f)) {
        passwordField()
    }
    passwordValidate(
        modifier = Modifier
            .weight(0.05f)
            .align(Alignment.CenterVertically) // 直接设置垂直居中
    )
}

内容的提问来源于stack exchange，提问作者Seb