Jetpack Compose 浮动操作按钮未显示

Question

我有一个底部表单对话框。对于该对话框，我使用的是导航库ModalBottomSheetDialog中的Accompanist。在名为 的可组合乐趣对话框中PlatformsScreen，我有一个LazyColumn带有RadioButton. 每当选择任何单选按钮时，我都会将所选项目添加到selectedPlatforms其中mutableList：

@Composable
fun PlatformsScreen(
    modifier: Modifier = Modifier,
    navController: NavController,
    viewModel: PlatformsScreenViewModel = hiltViewModel(),
) {
    // this is the platforms that I fetch from network
    val platforms = viewModel.platforms.observeAsState()

    val listState = rememberLazyListState()

    //this is the platforms that I selected from the platforms list
    val selectedPlatforms by rememberSaveable {
        mutableStateOf(mutableListOf<Platform>())
    }
    
    DefaultScreenUI(toolbar = {
        BottomSheetDialogToolbar(title = "Platforms")
    },
        floatingActionButton = {
            //This is not working
            AnimatedVisibility(visible = selectedPlatforms.size > 0,
                enter = expandVertically(),
                exit = shrinkVertically())
            {
                ApplyFilterFab()
            }
        }
    ) {

        when (platforms.value) {
            is Resource.Loading -> {
                LoadingItem()
            }
            is Resource.Error -> {
                ErrorItem(message = platforms.value!!.error!!,
                    onRetryClick = viewModel::setRefresh)
            }
            is Resource.Success -> {
                if (platforms.value!!.data!!.isNotEmpty()) {
                    LazyColumn(modifier = modifier.fillMaxSize(), state = listState) {
                        items(count = platforms.value!!.data!!.size) {
                            //platform item
                            PlatformItem(
                                platform = platforms.value!!.data!![it],
                            ) { platform, selected ->
                                Timber.d(selectedPlatforms.size.toString())
                                if (!selected) {
                                    selectedPlatforms.remove(platform)
                                } else {
                                    selectedPlatforms.add(platform)
                                }
                            }
                        }
                    }
                } else {
                    //empty view
                }
            }

        }
}
}

这DefaultScreenUI也是一个可组合的乐趣Scaffold：

@Composable
fun DefaultScreenUI(
    toolbar: (@Composable () -> Unit)? = null,
    floatingActionButton: (@Composable () -> Unit)? = null,
    fabPos: FabPosition = FabPosition.End,
    content: @Composable () -> Unit,
) {
    val scaffoldState = rememberScaffoldState()
    Scaffold(
        scaffoldState = scaffoldState,
        topBar = { toolbar?.invoke() },
        floatingActionButton = { floatingActionButton?.invoke() },
        floatingActionButtonPosition = fabPos) {
        Box(modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colors.primary)) {
            content()
        }
    }
}

这也是我的PlatformItem可组合项：

@Composable
fun PlatformItem(
    modifier: Modifier = Modifier,
    platform: Platform,
    onItemSelected: (Platform,Boolean) -> Unit
) {
    var selected by rememberSaveable {
        mutableStateOf(false)
    }

    Row(modifier = modifier
        .fillMaxWidth()
        .height(40.dp)
        .clickable {
            selected = !selected
            onItemSelected(platform,selected)
        },
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {

        Text(
            modifier = Modifier.padding(start = dimensionResource(id = R.dimen.dimen_8)),
            text = platform.name!!,
            style = MaterialTheme.typography.subtitle1,
            color = MaterialTheme.colors.onPrimary)

        RadioButton(selected = selected, onClick = {
            selected = !selected
            onItemSelected(platform,selected)
        })

    }
}

我想做的是每当选择列表中的任何项目时，这意味着selectedPlatforms.size > 0我想在对话框中显示FloatingActionButton并隐藏按钮（如果selectedPlatforms为空）。结果如下：

如您所见，它没有显示。我应该怎么办？

Answer 1

这是一个错误，我已经报告了。

在修复之前，目前最简单的解决方案是切换到scaleIn/scaleOut转换，它们工作得很好。

另一个选项是放置AnimatedVisibilityFABBox静态大小，即56.dp，在这种情况下，除了剪切阴影之外，其他过渡效果都很好。可以通过将参数清零来禁用阴影elevation，但这也不是最佳解决方案。