Gaveta de navegação

O componente da gaveta de navegação é um menu deslizante que permite aos usuários navegar para várias seções do app. Os usuários podem ativá-lo deslizando a tela na lateral ou tocando em um ícone de menu.

Considere estes três casos de uso para implementar uma gaveta de navegação:

• Organização de conteúdo:permita que os usuários alternem entre diferentes categorias, como apps de notícias ou blogs.
• Gerenciamento da conta:forneça links rápidos para as configurações da conta e seções de perfil em apps com contas de usuário.
• Descoberta de recursos:organize vários recursos e configurações em um único menu para facilitar a descoberta e o acesso de usuários em apps complexos.

No Material Design, há dois tipos de gavetas de navegação:

• Padrão:compartilhe espaço em uma tela com outro conteúdo.
• Modal:aparece acima de outros conteúdos em uma tela.

Exemplo

Você pode usar o elemento combinável ModalNavigationDrawer para implementar uma gaveta de navegação.

Use o slot drawerContent para fornecer um ModalDrawerSheet e o conteúdo da gaveta, como no exemplo a seguir:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            Divider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    // Screen content
}
MaterialLayoutSnippets.kt

ModalNavigationDrawer aceita vários outros parâmetros de gaveta. Por exemplo, você pode alternar se a gaveta responde ou não a ações de arrastar com o parâmetro gesturesEnabled, como no exemplo a seguir:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            // Drawer contents
        }
    },
    gesturesEnabled = false
) {
    // Screen content
}
MaterialLayoutSnippets.kt

Comportamento do controle

Para controlar como a gaveta abre e fecha, use DrawerState. Você precisa transmitir um DrawerState para ModalNavigationDrawer usando o parâmetro drawerState.

DrawerState fornece acesso às funções open e close, bem como a propriedades relacionadas ao estado atual da gaveta. Essas funções de suspensão exigem um CoroutineScope, que pode ser instanciado usando rememberCoroutineScope. Também é possível chamar as funções de suspensão em resposta a eventos da interface.

val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet { /* Drawer content */ }
    },
) {
    Scaffold(
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("Show drawer") },
                icon = { Icon(Icons.Filled.Add, contentDescription = "") },
                onClick = {
                    scope.launch {
                        drawerState.apply {
                            if (isClosed) open() else close()
                        }
                    }
                }
            )
        }
    ) { contentPadding ->
        // Screen content
    }
}
MaterialLayoutSnippets.kt