Gaveta de navegação

O componente de 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 de lado 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 em apps de notícias ou blogs.
• Gerenciamento da conta:ofereça links rápidos para as configurações da conta e as seções do 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:compartilha espaço em uma tela com outro conteúdo.
• Modal:aparece sobre outro conteúdo na 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 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. Por exemplo, você pode 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

Comportamento do controle

Para controlar como a gaveta é aberta e fechada, use DrawerState. É necessário transmitir um DrawerState para ModalNavigationDrawer usando o parâmetro 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. Também é possível chamar as funções de suspensão em resposta a eventos da IU.

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