Gaveta de navegação

O componente da gaveta de navegação é um menu deslizante que permite que os usuários naveguem por várias seções do app. Os usuários podem ativar esse recurso deslizando para o lado ou tocando em um ícone de menu.

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

• Organização do conteúdo: permite que os usuários alternem entre diferentes categorias, como em apps de notícias ou blogs.
• Gerenciamento da conta:forneça links rápidos para o perfil e as configurações da conta. seções em apps com contas de usuário.
• Descoberta de recursos: organize vários recursos e configurações em uma única 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 o espaço em uma tela com outros conteúdos.
• Modal: aparece sobre outros conteúdos em uma tela.

Exemplo

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

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

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            HorizontalDivider()
            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. Para exemplo, é possível ativar ou não a resposta da gaveta às 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

Controlar o comportamento

Para controlar como a gaveta abre e fecha, use DrawerState. Você deve transmitir um DrawerState para a ModalNavigationDrawer usando a função drawerState; .

DrawerState fornece acesso às funções open e close, além de propriedades relacionadas ao estado atual da gaveta. Essas funções de suspensão exigem um CoroutineScope, que pode ser instanciado usando rememberCoroutineScope. Você também pode chamar as funções de suspensão resposta a eventos de 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