Gezinme çekmecesi bileşeni, kullanıcıların uygulamanızın çeşitli bölümlerine gidebilmesini sağlayan kayan bir menüdür. Kullanıcılar, görünümü yana kaydırarak veya menü simgesine dokunarak etkinleştirebilir.
Gezinme Çekmecesi uygulamak için şu üç kullanım örneğini göz önünde bulundurun:
- İçerik düzenleme: Kullanıcılara, haber veya blog uygulamaları gibi farklı kategoriler arasında geçiş yapma olanağı sağlayın.
- Hesap yönetimi: Kullanıcı hesabı olan uygulamalarda hesap ayarlarına ve profil bölümlerine hızlı bağlantılar sağlayın.
- Özellik keşfetme: Karmaşık uygulamalarda kullanıcıların keşfedilebilirliğini ve erişimini 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 ekrandaki diğer içeriklerle alan paylaşın.
- Kalıcı: Ekrandaki diğer içeriklerin üzerinde görünür.
Örnek
Gezinme çekmecesi uygulamak için ModalNavigationDrawer
composable'ı kullanabilirsiniz.
Aşağıdaki örnekte gösterildiği gibi bir ModalDrawerSheet
ve çekmecenin içeriğini sağlamak için drawerContent
alanını kullanın:
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, çekmecenin sürüklemelere yanıt verip vermeyeceğini gesturesEnabled
parametresiyle aşağıdaki örnekte gösterildiği gibi değiştirebilirsiniz:
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { // Drawer contents } }, gesturesEnabled = false ) { // Screen content }
Davranış denetimi
Çekmecenin nasıl açılıp kapanacağını kontrol etmek için DrawerState
işlevini kullanın. drawerState
parametresini kullanarak ModalNavigationDrawer
adresine 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 bir CoroutineScope
gerektirir. Bunu rememberCoroutineScope
kullanarak ö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 } }