Jetpack Compose模态底部表格布局SheetContent未从屏幕底部弹出。

Question

我需要在一个屏幕中展示两个不同的底部面板。我使用一个名为dialogType的状态，动态更改ModalBottomSheetLayout的sheetContent。我隐藏High底部面板，更改dialogType并显示Short。 Short从前一个底部面板的顶部出现，而不是从屏幕底部出现。可以在这里看到：

@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.animateTo(ModalBottomSheetValue.Expanded)之前添加sheetState.performFling(0.1f)，可以正确显示短的Short底部工作表。 Compose版本为1.1.0-beta01

- Svitlana Mozharovska

---

嗨，Svitlana，我的应用程序也遇到了同样的问题。你找到解决这个问题的方法了吗？ - Nico Bos

Answer 1

ModalBottomSheetLayout 的默认行为是这样的。不仅如此，Compose 中的许多其他 Composable 都预先构建了默认动画。你唯一能做的就是阅读文档，看是否提供了覆盖机制。否则，你只能查看源代码。只需 Ctrl + 单击 Composable 的名称，即可查看源代码。你可以复制粘贴它，然后根据需要进行修改。我认为 ModalBottomSheetLayout 没有提供默认的覆盖机制，所以这基本上就是你的答案 - 这是实现的行为。你需要修改源代码并创建自定义 Composable。

- Richard Onslow Roper