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

wqlqzqxt  于 2023-03-24  发布在  Kotlin
关注(0)|答案(1)|浏览(198)

我有两个图标按钮在一排。第二个是隐藏的,只有当第一个被点击时才显示。我不知道的是如何保持第一个按钮的背景透明度,而另一个按钮通过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)
            )
        }
    }
}
vhmi4jdf

vhmi4jdf1#

你的第一个按钮仍然是透明的,剪切效果是由AnimatedVisibility剪切视图引起的,这是默认行为。
要重新定义它,只需将clip = false传递给expandHorizontally/shrinkHorizontally

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

结果:

相关问题