Jetpack Compose：如何让元素相对于另一元素垂直居中

要让绿色Box仅垂直居中于红色Box，同时只用Box、Row、Column实现，你可以通过调整布局结构达成，以下是几种通用方案：

方案一：拆分布局层级（推荐） #

将绿色Box与红色Box放在同一个垂直居中的Row内，黄色Box单独放在下方并与红色Box对齐。这种方式逻辑直观，适配任意尺寸的红色Box：

@Composable
fun Squares() {
    Column {
        // 绿色与红色垂直居中对齐
        Row(verticalAlignment = Alignment.CenterVertically) {
            Box(
                modifier = Modifier
                    .size(50.dp)
                    .background(Color.Green)
            )
            Box(
                modifier = Modifier
                    .size(100.dp)
                    .background(Color.Red)
            )
        }
        // 黄色Box与红色Box右对齐，保持布局一致性
        Box(
            modifier = Modifier
                .size(100.dp)
                .background(Color.Yellow)
                .align(Alignment.End)
        )
    }
}

方案二：父容器约束高度（保持外层Row结构） #

如果需要维持外层为Row的结构，可以给绿色Box套一个父Box，让父Box高度与红色Box一致，再通过contentAlignment让绿色Box居中：

@Composable
fun Squares() {
    Row {
        // 父Box高度与右侧红色Box匹配，内部居中放置绿色Box
        Box(
            modifier = Modifier.height(100.dp),
            contentAlignment = Alignment.Center
        ) {
            Box(
                modifier = Modifier
                    .size(50.dp)
                    .background(Color.Green)
            )
        }
        Column {
            Box(
                modifier = Modifier
                    .size(100.dp)
                    .background(Color.Red)
            )
            Box(
                modifier = Modifier
                    .size(100.dp)
                    .background(Color.Yellow)
            )
        }
    }
}

方案三：动态适配尺寸（完全通用） #

如果红色Box尺寸需要动态调整，可以将尺寸提取为变量，实现完全通用的布局：

@Composable
fun Squares() {
    // 提取红色Box尺寸为变量，支持动态修改
    val redBoxSize = 100.dp
    
    Row {
        Box(
            modifier = Modifier.height(redBoxSize),
            contentAlignment = Alignment.Center
        ) {
            Box(
                modifier = Modifier
                    .size(50.dp)
                    .background(Color.Green)
            )
        }
        Column {
            Box(
                modifier = Modifier
                    .size(redBoxSize)
                    .background(Color.Red)
            )
            Box(
                modifier = Modifier
                    .size(redBoxSize)
                    .background(Color.Yellow)
            )
        }
    }
}

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