android - Jetpack Compose ModalBottomSheetLayout SheetContent 不在屏幕底部出现

Question

我需要在一个屏幕上显示两个不同的 Bottom Sheet 。我更改 sheetContent的ModalBottomSheetLayout动态使用 dialogType状态。我隐藏了High Bottom Sheet ，更改 dialogType并显示Short . Short出现在上一个 Bottom Sheet 的顶部，而不是从屏幕底部，
you can see here:

@Composable
fun BottomSheet() {
    val sheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
    val scope = rememberCoroutineScope()
    var dialogType by remember { mutableStateOf<BottomSheetType>(BottomSheetType.None) }

    ModalBottomSheetLayout(
        sheetState = sheetState,
        sheetContent = {
            when (dialogType) {
                is BottomSheetType.High -> {
                    LazyColumn {
                        items(10) {
                            Text(text = "Item $it")
                        }

                        item {
                            Button(onClick = {
                                scope.launch {
                                    sheetState.hide()
                                    dialogType = BottomSheetType.Short
                                    sheetState.animateTo(ModalBottomSheetValue.Expanded)
                                }
                            }) {
                                Text(text = "Short Bottom Sheet")
                            }
                        }
                    }
                }
                is BottomSheetType.Short -> {
                    Text(text = "Item 1")
                }
                is BottomSheetType.None -> Spacer(modifier = Modifier.size(1.dp))
            }
        }
    ) {
        Box(
            modifier = Modifier.fillMaxSize()
        ) {
            Button(
                onClick = {
                    dialogType = BottomSheetType.High
                    scope.launch {
                        sheetState.animateTo(ModalBottomSheetValue.Expanded)
                    }
                },
                modifier = Modifier.align(Alignment.Center)
            ) {
                Text(text = "High Bottom Sheet")
            }
        }
    }
}

sealed class BottomSheetType {
    object None : BottomSheetType()
    object High : BottomSheetType()
    object Short : BottomSheetType()
}

如果添加 sheetState.performFling(0.1f)之前 sheetState.animateTo(ModalBottomSheetValue.Expanded) , Short Bottom Sheet 显示正确。
撰写版本 1.1.0-beta01

Answer 1

这是 ModalBottomSheetLayout 的默认行为.不仅如此，Compose 中的许多其他 Composables已预先构建以包含默认动画。您唯一能做的就是阅读文档以查看是否提供了覆盖机制。否则，您唯一的机会就是查看源代码。只需 Ctrl + Click在 Composable 的名称上，您将看到源代码。您可以复制粘贴它，然后根据您的需要进行修改。我不认为ModalBottomSheetLayout提供了一个默认的覆盖机制，所以这几乎就是你的答案——它是实现的行为。您需要修改源代码并创建自定义 Composable。