无法为 M3 脚手架中可见的 FAB 制作动画

Question

我正在尝试获得可以在 Compose 中切换 FAB 可见性的行为，并带有一些进入/退出动画Scaffold。

\n

问题

\n

FAB 消失得很好。然而，无论我如何尝试，我都无法让它重新出现——就像它完全从树上消失一样，再也不会回来了！

\n

此代码重现了该问题：

\n

class TestActivity : ComponentActivity() {\n    @OptIn(ExperimentalMaterial3Api::class)\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContent {\n            var fabVisible by remember { mutableStateOf(true) }\n            Scaffold(\n                floatingActionButton = {\n                    AnimatedVisibility(visible = fabVisible) {\n                        FloatingActionButton(onClick = {}) {\n                            Icon(Icons.Default.Star, contentDescription = null)\n                        }\n                    }\n                }\n            ) {\n                Button(onClick = { fabVisible = !fabVisible }) {\n                    Text("Click to toggle FAB")\n                }\n            }\n        }\n    }\n}\n

\n

这是一个演示 - FAB 执行了某种擦除操作，但随后再也没有返回：

\n

\n

我尝试过的解决方法

\n

如果我执行以下任一操作，FAB 将切换：

\n

\n
1. 将 FAB 放在另一个区域，例如Scaffold内容或topbar区域。
\n
2. 去除AnimatedVisibility。
\n
3. 将 FAB 放入明确大小的Box:\n

   \xe2\x80\xa6\nScaffold(\n    floatingActionButton = {\n        Box(\n            modifier = Modifier\n                .width(56.0.dp)\n                .height(56.0.dp)\n        ) {\n            AnimatedVisibility(visible = fabVisible) {\n                FloatingActionButton(onClick = {}) {\n                    Icon(Icons.Default.Star, contentDescription = null)\n                }\n            }\n        }\n    }\n)\n\xe2\x80\xa6\n

   \n
\n

\n

显然，解决方案 1 和 2 没有达到我想要的效果，而解决方案 3（Box解决方案）并不理想 - 我必须知道 FAB 的大小才能做到这一点（我想可能有一种方法可以还记得它第一次可见时的固有尺寸吗？）并且动画很奇怪 - 它从中间的角落而不是从中心开始，并且高度在最后突然“弹出”：

\n

\n

我应该怎么做才能让FAB按预期进入和退出？

\n

Answer 1

尝试使用scaleIn和scaleOut动画。

 AnimatedVisibility(
      visible = fabVisible,
      enter = scaleIn(),
      exit = scaleOut(),
 ) {
      FloatingActionButton(onClick = {}) {
          Icon(Icons.Default.Star, contentDescription = null)
      }
 }