我有两个图标按钮在一排。第二个是隐藏的,只有当第一个被点击时才显示。我不知道的是如何保持第一个按钮的背景透明度,而另一个按钮通过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)
)
}
}
}
1条答案
按热度按时间vhmi4jdf1#
你的第一个按钮仍然是透明的,剪切效果是由
AnimatedVisibility
剪切视图引起的,这是默认行为。要重新定义它,只需将
clip = false
传递给expandHorizontally
/shrinkHorizontally
:结果: