如何在Jetpack Compose中实现带动态高度Divider的垂直布局？

想要实现如下布局：在Column中包含两个垂直Divider和一个圆形组件，希望这些Divider无需指定具体高度，就能自适应所需的垂直空间，实现动态效果。

原代码如下：

Box(
    modifier = Modifier.zIndex(100 - dataModel.currentStep.toFloat())
) {
    Row(
        Modifier
            .background(color = Color.Green)
            .padding(8.dp)
            .fillMaxWidth()
            .height(IntrinsicSize.Max)
    ) {
        Column(Modifier.fillMaxHeight(), horizontalAlignment = Alignment.CenterHorizontally) {
            Divider(modifier = Modifier.width(2.dp), color = Color.Black)
            Circle()
            Divider(modifier = Modifier.width(2.dp), color = Color.Black)
        }
    }
}

@Composable
fun Circle() {
    Box(
        modifier = Modifier
            .size(24.dp)
            .background(color = colorResource(R.color.turquoise).copy(alpha = 0.3f), CircleShape)
    ) {
        Box(
            modifier = Modifier
                .size(12.dp)
                .align(Alignment.Center)
                .background(color = colorResource(R.color.turquoise), CircleShape)
        )
    }
}

期望效果示意图：

要实现Divider自适应填充Circle上下的剩余垂直空间，只需做两处修改：

• 给Column添加verticalArrangement = Arrangement.SpaceBetween，让子元素在垂直方向上两端对齐，中间留出最大间距
• 给两个Divider分别加上Modifier.weight(1f)，让它们平分Circle之外的剩余空间

修改后的完整代码：

Box(
    modifier = Modifier.zIndex(100 - dataModel.currentStep.toFloat())
) {
    Row(
        Modifier
            .background(color = Color.Green)
            .padding(8.dp)
            .fillMaxWidth()
            .height(IntrinsicSize.Max)
    ) {
        Column(
            modifier = Modifier.fillMaxHeight(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.SpaceBetween
        ) {
            Divider(
                modifier = Modifier
                    .width(2.dp)
                    .weight(1f),
                color = Color.Black
            )
            Circle()
            Divider(
                modifier = Modifier
                    .width(2.dp)
                    .weight(1f),
                color = Color.Black
            )
        }
    }
}

@Composable
fun Circle() {
    Box(
        modifier = Modifier
            .size(24.dp)
            .background(color = colorResource(R.color.turquoise).copy(alpha = 0.3f), CircleShape)
    ) {
        Box(
            modifier = Modifier
                .size(12.dp)
                .align(Alignment.Center)
                .background(color = colorResource(R.color.turquoise), CircleShape)
        )
    }
}

修改后，Divider会自动根据Column的高度调整自身高度，无需手动指定固定值，实现动态适配效果。

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