kotlin 如何动画我的Jetpack合成行的所有位置,由于可见性的变化,只是一个元素?

k7fdbhmy  于 2023-04-07  发布在  Kotlin
关注(0)|答案(1)|浏览(141)

我试图把一个效果放在一起,看起来像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"
                )
            }
        }
    }
}
lvmkulzt

lvmkulzt1#

您可以将Enter/ExitTransitions与+号组合使用。将slideInHorizontallyexpandHorizontally组合使用,以及将slideOutHorizontallyshrinkHorizontally组合使用,将给予您想要的结果。您可能需要调整速度和值以完全匹配您的需要。

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

相关问题