折叠为 FAB 的扩展 FAB 无法正确设置动画 - Jetpack Compose (Kotlin)

Question

我正在尝试制作一个扩展的 FAB，当用户位于屏幕顶部时，它会完全扩展，但是当他们滚动时（在滚动过程中），我希望它折叠成带有单个图标的 FAB。现在的行为就是这样做的，但是动画似乎被跳过了，并且转换几乎是瞬时的，而不是更微妙的转换。这是我的代码：

package com.example.turnorder.composables.shared


import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.expandHorizontally
import androidx.compose.animation.shrinkHorizontally
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.lazy.grid.LazyGridState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

@Composable
fun ScrollAwareFAB(
    listState: LazyGridState,
    modifier: Modifier,
    onClick: () -> Unit
) {

    var isExtended by remember { mutableStateOf(true) }



    LaunchedEffect(listState) {
            snapshotFlow { listState.firstVisibleItemScrollOffset }
                .collect {offset ->
                    isExtended = offset ==0

            }

        }


    AnimatedVisibility(
        visible = true,
        enter = expandHorizontally(expandFrom = Alignment.End),//animationSpec = tween(durationMillis = 1500, delayMillis = 1500, easing = LinearEasing)) + expandHorizontally (),
        exit = shrinkHorizontally (shrinkTowards = Alignment.End)//fadeOut(animationSpec = tween(durationMillis = 1500, delayMillis = 1500, easing = LinearEasing)) + shrinkHorizontally (),

    ) {
        Box(modifier){
            if (isExtended) {
                ExtendedFloatingActionButton(
                    text = { Text("Add Character")},
                    icon = { Icon(Icons.Filled.Add, contentDescription = "Add") },
                    onClick = { onClick },
                    containerColor = MaterialTheme.colorScheme.primary,
                    contentColor = MaterialTheme.colorScheme.onPrimary,
                )
            } else if (!isExtended){
                FloatingActionButton(
                    onClick =  {onClick},
                    containerColor = MaterialTheme.colorScheme.primary ,
                    contentColor = MaterialTheme.colorScheme.onPrimary


                ){
                    Icon(Icons.Filled.Add, contentDescription = "Add") }

            }
        }
    }

}

我尝试添加animationSpec详细信息，例如

animationSpec = tween(durationMillis = 1500, delayMillis = 1500, easing = LinearEasing)) + expandHorizontally ()

即使数字非常高，它的转变似乎也没有变慢。我真的很感激一些帮助，我确信我在做一些愚蠢的事情。

Answer 1

找到了一个简单的答案，以防其他人偶然发现这个问题。我做了以下工作并且确实有效：

        ExtendedFloatingActionButton(
        text = { Text("Add Character")},
        icon = { Icon(Icons.Filled.Add, contentDescription = "Add") },
        onClick = { showDialog = true } ,
        containerColor = MaterialTheme.colorScheme.primaryContainer,
        contentColor = MaterialTheme.colorScheme.onPrimaryContainer,
        expanded = isExtended,
        modifier = Modifier.align(Alignment.TopEnd).padding(top = 20.dp, end = 15.dp)
    )