如何在 Jetpack Compose 中的 ModelDrawer 布局中添加 FloatingActionButton android

Question

我想使用 Jetpack Compose 中的导航组件创建带有浮动操作按钮的抽屉式布局。我正在尝试使用以下代码但无法添加浮动操作按钮。我想在屏幕右下角添加 FAB 按钮。

    Surface(color = MaterialTheme.colors.background) {
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    val openDrawer = {
        scope.launch {
            drawerState.open()
        }
    }
    ModalDrawer(
        drawerState = drawerState,
        gesturesEnabled = drawerState.isOpen,
        drawerContent = {
            Drawer(
                onDestinationClicked = { route ->
                    scope.launch {
                        drawerState.close()
                    }
                    navController.navigate(route) {
                        popUpTo = navController.graph.startDestination
                        launchSingleTop = true
                    }
                }
            )
        },
    ) {
        NavHost(
            navController = navController,
            startDestination = DrawerScreens.Home.route
        ) {
            composable(DrawerScreens.Home.route) {
                Home(
                    openDrawer = {
                        openDrawer()
                    }
                )
            }
            composable(DrawerScreens.Account.route) {
                Account(
                    openDrawer = {
                        openDrawer()
                    }
                )
            }
            composable(DrawerScreens.Settings.route) {
                Settings(
                    openDrawer = {
                        openDrawer()
                    }
                )
            }
        }
    }
}

Answer 1

您可以使用 Scaffold.
如果 drawerContent 参数不是 null，Scaffold 只是使用 ModalDrawer 和 drawerState = scaffoldState.drawerState。

类似于：

val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()
Scaffold(
    scaffoldState = scaffoldState,
    drawerContent = {
        //Your code and use drawerState = scaffoldState.drawerState.
        //Drawer( )
    },
    floatingActionButtonPosition = FabPosition.End,
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("...") },
            onClick = { /* fab click handler */ }
        )
    },
    content = { innerPadding ->
        //Your code and and use drawerState = scaffoldState.drawerState.
        NavHost(
            navController,
            startDestination = "Screen1"
        ) {
           //....
        }
    }
)

如何在 Jetpack Compose 中的 ModelDrawer 布局中添加 FloatingActionButton android

How to add FloatingActionButton in ModelDrawer Layout in Jetpack compose in android

android

kotlin

android-jetpack

android-jetpack-compose