Jetpack Compose 中尺寸不断增大的动画

Question

我想制作一个按钮的动画，当单击时，它的大小会增加并超出 Box() 的大小。我用自定义形状编写了一个动画，它可以工作，但是在使用它的地方，您必须编写 Modifier.size(21.dp) 而不是 Modifier.size(20.dp)。看起来像：

我可以以某种方式编写一个输出超出 Box() 大小的动画吗？因为现在解决方案看起来有点复杂

Answer 1

像 Box、Row 或 Column 这样的默认可组合项会根据其最大约束来限制子项可以获得的最大高度或宽度。您可以在这个答案中找到有关约束以及大小修改器如何在幕后工作的更多详细信息。

如果您希望增加子级的最大尺寸大于父级，您应该做的是强制最大

Constraints

超出父级。

您可以使用

Modifier.wrapContentSize(unBounded=true)

或

Modifier.layout{}

（wrapContentSize 也可以在后台实现超出父级的动画尺寸。

@Preview
@Composable
private fun Test() {

    var target by remember {
        mutableStateOf(20.dp)
    }
    val size by animateDpAsState(target)

    Column(
        modifier = Modifier.fillMaxSize().padding(20.dp)
    ) {

        Button(
            onClick = {
                target = if (size == 20.dp) {
                    40.dp
                } else {
                    20.dp
                }
            }
        ) {
            Text("Current size $size")
        }

        Spacer(modifier = Modifier.height(20.dp))
        Box(modifier = Modifier.size(20.dp).border(1.dp, Color.Red)) {

            Box(
                modifier = Modifier
                    .animateContentSize()
                    .size(size)
                    .background(Color.Blue)
            )
        }

        Spacer(modifier = Modifier.height(20.dp))
        Box(modifier = Modifier.size(20.dp).border(1.dp, Color.Red)) {
            Box(
                modifier = Modifier
                    // This will let child to get Constraints.Infinity for maxWidth and Height
                    // so it can be measured with next Size modifier's max bounds
                    .wrapContentSize(unbounded = true)
                    .size(size)
                    .background(Color.Green)
            )
        }
    }

}