Jetpack Compose：wrapContent与fillMaxSize状态下组件左右对齐实现

需求说明 #

容器初始为wrapContentSize状态，点击后通过线性动画切换为fillMaxSize状态；两种状态下需始终保持一个文本左对齐、一个文本右对齐，文本移动采用LinearEasing动画。

原代码问题分析 #

原代码存在以下问题导致无法满足需求：

• 内层Box设置了align(Alignment.TopStart)，导致容器扩展时Row无法占满可用宽度，Arrangement.SpaceBetween无法正确拉开两个文本
• 重复给每个文本外层Box添加animateContentSize，不仅冗余，还无法实现整体尺寸切换时的文本平滑移动
• 多层Box嵌套导致尺寸限制冲突，fillMaxSize无法真正生效

修正后的代码 #

@Composable
private fun AlignmentWithAnimation() {
    var expanded by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .run {
                if (expanded) fillMaxSize() else wrapContentSize()
            }
            .animateContentSize(
                animationSpec = tween(
                    durationMillis = 2000,
                    easing = LinearEasing
                )
            )
            .background(Color.Green)
            .clickable { expanded = !expanded }
    ) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Text(
                text = "Hello World",
                color = Color.Red,
                modifier = Modifier.padding(10.dp)
            )
            Text(
                text = "Hello World",
                color = Color.Yellow,
                modifier = Modifier.padding(10.dp)
            )
        }
    }
}

关键改动说明 #

1. 简化结构并统一动画：将尺寸动画直接应用在根容器上，通过animateContentSize处理wrapContentSize与fillMaxSize的切换，确保容器尺寸变化的平滑动画，同时避免重复动画设置。
2. 确保Row占满宽度：内部Row设置fillMaxWidth()，无论容器是包裹内容还是占满屏幕，都能让Arrangement.SpaceBetween生效，保证两个文本始终左右对齐。
3. 直接控制根容器尺寸：根据expanded状态直接给根容器设置尺寸修饰符，避免多层嵌套的尺寸限制，确保状态切换时尺寸变化符合预期。

内容的提问来源于stack exchange，提问作者It's me guys