Jetpack Compose 浮动操作按钮未显示

Question

我有一个底部 sheet 对话框。对于对话框，我使用 Accompanist 导航库中的 ModalBottomSheetDialog。在名为 PlatformsScreen 的可组合乐趣对话框中，我有一个 LazyColumn，其中的项目具有 RadioButton。 Whenever any of the radio buttons is selected I'm adding the selected item into the selectedPlatforms which is a 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

这是一个错误，我 reported it。

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

另一个选项是 AnimatedVisibility 是 FAB 静态大小的 Box，即 56.dp，在这种情况下，其他转换工作正常，除了裁剪阴影。可以通过将 elevation 参数置零来禁用阴影，这也不是最佳解决方案。

Jetpack Compose 浮动操作按钮未显示

Jetpack Compose Floating Action Button is not showing up

android

kotlin

bottom-sheet

android-jetpack-compose