如何在 Jetpack Compose 中使底部工作表覆盖整个屏幕

Question

我正在使用 Jetpack Compose 并尝试在用户单击 .txt 文件中的登录按钮时使登录屏幕覆盖整个屏幕TopAppBar。

ModalBottomSheetLayout我使用和 a的组合，Scaffold所以我可以有 aTopAppBar和 a BottomAppBar。

目前，当显示登录屏幕时，它仅覆盖屏幕的一半。

                       val coroutineScope = rememberCoroutineScope()
                        val bottomState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
                        ModalBottomSheetLayout(
                            sheetState = bottomState,
                            sheetShape = MaterialTheme.shapes.large,
                            sheetContent = {
                                FullScreen()
                            }
                        ) {

                            Scaffold(
                                topBar = {
                                    TopAppBar(
...
                                content = {

                                    NavHost(navController = navController,
                                        startDestination = "journey") {
                                        composable("journey") { JourneyScreen() }
...
                               bottomBar = {
                                    BottomAppBar(
                                        content = {
                                            BottomNavigation() {

                                                val navBackStackEntry by navController.currentBackStackEntryAsState()
...

@Composable
fun FullScreen() {
    Box(modifier = Modifier
        .fillMaxSize()
    ) {
        Text("Full Screen")
    }
}

已经被困在这个问题上太久了，感谢任何帮助。

Answer 1

现在是animateTo内部的。

通过 M3 ( 1.1.0)，您可以使用该expand方法

scope.launch { state.expand() }

使用 M2 ( 1.4.0) 和 M3 ( 1.1.0) 您可以将属性设置skipHalfExpanded为true

val state = rememberModalBottomSheetState(
    initialValue = ModalBottomSheetValue.Hidden,
    skipHalfExpanded = true
)

然后使用show方法：

scope.launch { state.show() }

在 M2 ( 1.4.0) 拥有全屏ModalBottomSheetLayout之前，state.show()您可以使用：

scope.launch { state.animateTo(ModalBottomSheetValue.Expanded) }