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 } }