android-jetpack-compose - 无法为 M3 脚手架中可见的 FAB 设置动画

Question

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

问题

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

这段代码重现了这个问题:

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

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

我尝试过的解决方法

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

1. 将 FAB 放在其他区域，例如 Scaffold 内容或 topbar 区域。
2. 删除 AnimatedVisibility。
3. 将 FAB 放入明确大小的 Box 中:

   …
   Scaffold(
       floatingActionButton = {
           Box(
               modifier = Modifier
                   .width(56.0.dp)
                   .height(56.0.dp)
           ) {
               AnimatedVisibility(visible = fabVisible) {
                   FloatingActionButton(onClick = {}) {
                       Icon(Icons.Default.Star, contentDescription = null)
                   }
               }
           }
       }
   )
   …
   

显然解决方案 1 和 2 没有达到我想要的效果，解决方案 3(Box 解决方案)也不理想 - 我必须知道 FAB 的大小才能做到这一点(我想象一下，当第一次看到它时，可能有一种方法可以记住它的固有大小？)并且动画很奇怪 - 它从角落开始而不是从中心开始，并且高度在最后突然“弹出”:

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

Answer 1

尝试使用 scaleIn 和 scaleOut 动画。

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