Gezinme çekmecesi

Gezinme çekmecesi bileşeni, kullanıcıların gezinmesine olanak tanıyan kayan bir menüdür. uygulamanızın çeşitli bölümlerine erişebilir. Kullanıcılar, yana doğru kaydırarak etkinleştirebilir bir menü simgesine dokunun.

Gezinme Çekmecesi uygulamak için şu üç kullanım örneğini göz önünde bulundurun:

  • İçerik kuruluşu: Kullanıcıların farklı içerikler arasında geçiş yapmasına olanak tanıma haber veya blog uygulamalarında olduğu gibi.
  • 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.

Materyal Tasarım'da iki tür gezinme çekmecesi vardır:

  • Standart: Ekrandaki alanı diğer içeriklerle paylaşın.
  • Kalıcı: 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 gesturesEnabled parametresini aşağıdaki örnekteki gibidir:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            // Drawer contents
        }
    },
    gesturesEnabled = false
) {
    // Screen content
}

Davranışı kontrol etme

Çekmecenin nasıl açılıp kapanacağını kontrol etmek için DrawerState işlevini kullanın. Şunları yapmalısınız: drawerState kullanarak ModalNavigationDrawer adlı kullanıcıya DrawerState iletin parametresinden sonra bir değer girin.

DrawerState, open ve close işlevlerinin yanı sıra geçerli çekmece durumuyla ilgili mülklere erişim sağlar. Bu askıya alma işlemleri fonksiyonları bir CoroutineScope gerektirir. Bunu kullanarak örneklendirebilirsiniz: rememberCoroutineScope 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
    }
}