在 Jetpack Compose 中使用 AnimatedVisibility 设置动画时 IconButton 透明度问题

Question

我有两个连续的 IconButtons。第二个是隐藏的，仅在单击第一个时显示。我想不通的是，当另一个按钮通过 AnimatedVisibility 显示时，如何保留第一个按钮的背景透明度。请参阅下面的 GIF。

这是我当前的代码：

Row(
    horizontalArrangement = Arrangement.Center,
    modifier = Modifier
        .fillMaxWidth()
        .padding(32.dp)
) {
    var isClicked by remember { mutableStateOf(false) }

    IconButton(
        onClick = {
            isClicked = !isClicked
        },
        modifier = Modifier.size(64.dp)
    ) {
        val icon: ImageVector = if (isClicked) {
            Icons.Filled.NotStarted
        } else {
            Icons.Filled.PauseCircle
        }
        Icon(
            imageVector = icon,
            contentDescription = "",
            modifier = Modifier.size(64.dp)
        )
    }

    AnimatedVisibility(
        visible = isClicked,
    ) {
        IconButton(
            onClick = { },
            modifier = Modifier
                .padding(start = 24.dp)
                .size(64.dp)
        ) {
            Icon(
                imageVector = Icons.Filled.StopCircle,
                contentDescription = "",
                modifier = Modifier.size(64.dp)
            )
        }
    }
}

Answer 1

您的第一个按钮仍然是透明的，裁剪效果是由

AnimatedVisibility

在动画期间将视图裁剪到边界引起的。这是默认行为。

要重新定义它，只需将

clip = false

传递给

expandHorizontally

/

shrinkHorizontally

:

AnimatedVisibility(
    visible = isClicked,
    enter = fadeIn() + expandHorizontally(clip = false),
    exit = fadeOut()  + shrinkHorizontally(clip = false),
    modifier = Modifier
) {

结果：