Gezinme çekmecesi bileşeni, kullanıcıların uygulamanızın çeşitli bölümlerine gitmesini sağlayan bir içeri kaydırılan menüdür. Kullanıcılar, yana kaydırarak veya bir menü simgesine dokunarak bu bileşeni etkinleştirebilir.
Gezinme Çekmecesi uygularken şu üç kullanım örneğini göz önünde bulundurun:
- İçerik organizasyonu: Kullanıcıların, haber veya blog uygulamaları gibi farklı kategoriler arasında geçiş yapmasını sağlayın.
- Hesap yönetimi: Kullanıcı hesapları içeren uygulamalardaki hesap ayarlarına ve profil bölümlerine hızlı bağlantılar sağlayın.
- Özellik keşfi: Karmaşık uygulamalarda kullanıcıların bulunmasını ve erişimi kolaylaştırmak için birden fazla özelliği ve ayarı tek bir menüde düzenleyin.
Materyal Tasarım'da iki tür gezinme çekmecesi vardır:
- Standart: Bir ekran içindeki alanı başka içeriklerle paylaş.
- Kalıcı: Ekranda diğer içeriğin üstünde görünür.
Örnek
Gezinme çekmecesi uygulamak için ModalNavigationDrawer composable'ı kullanabilirsiniz.
Aşağıdaki örnekte olduğu gibi, drawerContent yuvasını kullanarak bir ModalDrawerSheet sağlayıp çekmecenin içeriğini girin:
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
}
ModalNavigationDrawer, bir dizi ek çekmece parametresini kabul eder. Örneğin, aşağıdaki örnekte olduğu gibi, çekmecenin sürüklemelere yanıt verip vermeyeceğini gesturesEnabled parametresiyle değiştirebilirsiniz:
ModalNavigationDrawer(
drawerContent = {
ModalDrawerSheet {
// Drawer contents
}
},
gesturesEnabled = false
) {
// Screen content
}
Denetim davranışı
Çekmecenin nasıl açılıp kapanacağını kontrol etmek için DrawerState simgesini kullanın. drawerState parametresini kullanarak ModalNavigationDrawer öğesine bir DrawerState iletmeniz gerekir.
DrawerState, open ve close işlevlerine ve mevcut çekmece durumuyla ilgili özelliklere erişim sağlar. Bu askıya alma işlevleri için bir CoroutineScope gerekir. Bu değeri, rememberCoroutineScope ile örneklendirebilirsiniz. Askıya alma işlevlerini, kullanıcı arayüzü etkinliklerine yanıt olarak da çağırabilirsiniz.
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
}
}