kotlin Jetpack编写浮动操作按钮未显示

yc0p9oo0  于 2023-08-07  发布在  Kotlin
关注(0)|答案(3)|浏览(174)

我有一个底部工作表对话框。对于该对话框,我使用Accompanist导航库中的ModalBottomSheetDialog。在名为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
                }
            }

        }
}
}

字符串
DefaultScreenUIScaffold一起也是一种可组合的乐趣:

@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为空,则隐藏按钮。结果如下:


的数据
正如你所看到的,它没有出现。我该怎么办?

voase2hg

voase2hg1#

这是一个bug,我有reported it
在修复之前,目前最简单的解决方案是切换到scaleIn/scaleOut转换,它们工作正常。
另一个选项是将AnimatedVisibility设置为FAB静态大小的Box,即56.dp,在这种情况下,除了剪切的阴影外,其他过渡都可以正常工作。可以通过将elevation参数置零来禁用阴影,这也不是最佳解决方案。

toe95027

toe950272#

这是关于FAB(浮动操作按钮)的修复。问题在于AnimatedVisibility的默认动画“expandIn”,其中包括“ChangeSize”,并且具有IntSize(0,0)的默认值。当大小被设置为零时,FAB在重组期间不出现。如果在生产环境中出现此错误,您可以通过以下步骤解决它。

AnimatedVisibility(
            visible = isShowButtonAdd,
            enter = expandIn { IntSize(width = 1, height = 1) }
             ) {
             FloatingActionButton(onClick = { }) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }

        }

字符串

yxyvkwin

yxyvkwin3#

@Composable
fun FabButton (){
    Scaffold(
        modifier = Modifier
            .fillMaxSize(),
        floatingActionButton  = {
            ExtendedFloatingActionButton(
                text = { Text("Add Button") },
                icon = { Icon(Icons.Filled.Add,"")},
                onClick = { },
                modifier = Modifier.fillMaxWidth(0.4f)
                    .fillMaxHeight(0.075f),
                shape = AbsoluteRoundedCornerShape(50),
                backgroundColor = MaterialTheme.colors.primary,
                contentColor = MaterialTheme.colors.onPrimary
                )
        },
        floatingActionButtonPosition = FabPosition.Center,
        isFloatingActionButtonDocked = false,
        content = {}
    )
}

字符串

相关问题