如何因仅一个元素的可见性变化而对 Jetpack Compose Row 的所有位置进行动画处理？

Question

我正在尝试组合一个看起来像 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"
                )
            }
        }
    }
}

Answer 1

您可以将 Enter/ExitTransitions 与 + 号结合起来。slideInHorizontally与expandHorizontally、 和slideOutHorizontallywith结合shrinkHorizontally会给你带来你想要的结果。您可能需要调整速度和值以完全符合您的需要。

AnimatedVisibility(visible = allowSelection,
    enter = slideInHorizontally(initialOffsetX = { w -> w }) + expandHorizontally(expandFrom = Alignment.End),
    exit = slideOutHorizontally(targetOffsetX = { w -> w }) + shrinkHorizontally(shrinkTowards = Alignment.End)
)