Gezinme çekmecesi bileşeni, kullanıcıların uygulamanızın çeşitli bölümlerinde gezinmesine olanak tanıyan kaydırmalı bir menüdür. Kullanıcılar, yan taraftan kaydırarak veya bir menü simgesine dokunarak bu menüyü etkinleştirebilir.
Gezinme çekmecesi uygulamak için aşağıdaki üç kullanım alanını göz önünde bulundurun:
- İçerik düzenleme: 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ının bulunduğu uygulamalarda 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 keşfini ve erişimini kolaylaştırmak için birden fazla özelliği ve ayarı tek bir menüde düzenleyin.
Material Design'da iki tür gezinme çekmecesi vardır:
- Standart: Ekrandaki alanı diğer içeriklerle paylaşın.
- Modal: Ekrandaki diğer içeriklerin üzerinde görünür.
Örnek
Gezinme çekmecesi uygulamak için ModalNavigationDrawer
bileşenini kullanabilirsiniz.
drawerContent
yuvasını kullanarak bir ModalDrawerSheet
sağlayın ve aşağıdaki örnekte gösterildiği gibi çekmecenin içeriğini sağlayın:
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 }
ModalNavigationDrawer
, bir dizi ek çekmece parametresini kabul eder. Örneğin, çekmecenin sürüklemelere yanıt verip vermeyeceğini aşağıdaki örnekte gösterildiği gibi gesturesEnabled
parametresiyle değiştirebilirsiniz:
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { // Drawer contents } }, gesturesEnabled = false ) { // Screen content }
Davranışı kontrol etme
Çekmecenin nasıl açılacağını ve kapanacağını kontrol etmek için DrawerState
simgesini kullanın. drawerState
parametresini kullanarak DrawerState
değerini ModalNavigationDrawer
değerine göndermeniz gerekir.
DrawerState
, open
ve close
işlevlerinin yanı sıra geçerli çekmece durumuyla ilgili mülklere erişim sağlar. Askıya alma işlevleri için CoroutineScope
gerekir. rememberCoroutineScope
kullanarak CoroutineScope
oluşturabilirsiniz. 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 } }