我试图把一个效果放在一起,看起来像iOS的就地表格编辑。当在“编辑模式”选择控件滑在每一行的一侧。我做到了这一点,使用一个简单的AnimatedVisibility我的选择按钮和调整输入/退出参数。按钮本身看起来不错,但是我行的其他元素也不会对它们的位置进行动画处理。它们只是在最后进行快照更新?我应该如何获得这个“选择按钮滑动和其他小部件堆起来一点,以腾出空间“效果,因为我进出”编辑模式“?
我当前用于行的代码如下所示:
Row(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 10.dp),
verticalAlignment = Alignment.CenterVertically
) {
Icon( ... )
Spacer(modifier = Modifier.width(4.dp))
Text(text = keyInfo.name, modifier = Modifier.weight(1.0f), maxLines = 1)
Spacer(modifier = Modifier.width(10.dp))
SettingsLabel(text = keyInfo.created.shortPrinted())
AnimatedVisibility(visible = allowSelection,
enter = slideInHorizontally(initialOffsetX = { w -> w }),
exit = slideOutHorizontally(targetOffsetX = { w -> w })
) {
IconButton(
onClick = onSelectionClick, modifier = Modifier
.padding(start = 16.dp)
.size(28.dp)
) {
when (isSelected) {
true -> Icon(
Icons.Outlined.CheckCircle, "${keyInfo.name} selected for edit"
)
false -> Icon(
Icons.Default.RadioButtonUnchecked, "${keyInfo.name} not selected for edit"
)
}
}
}
}
1条答案
按热度按时间lvmkulzt1#
您可以将Enter/ExitTransitions与+号组合使用。将
slideInHorizontally
与expandHorizontally
组合使用,以及将slideOutHorizontally
与shrinkHorizontally
组合使用,将给予您想要的结果。您可能需要调整速度和值以完全匹配您的需要。