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: Hesap ayarlarına ve profile hızlı bağlantılar sağlama bölüm oluşturabilirsiniz.
  • Özellik keşfetme: Birden fazla özelliği ve ayarı tek bir yerde organize edin. menüsünü kullanarak karmaşık uygulamalarda kullanıcıyı bulmasını ve erişimini kolaylaştırabilirsiniz.

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

ModalNavigationDrawer composable'ı kullanarak bir gezinme çekmecesi.

drawerContent alanını kullanarak bir ModalDrawerSheet sağlayın ve çekmecenin içeriğini, aşağıdaki örnekte gösterildiği gibi:

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 gesturesEnabled parametresini aşağıdaki örnekteki gibidir:

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. Şunları yapmalısınız: drawerState kullanarak ModalNavigationDrawer adlı kullanıcıya DrawerState iletin parametresinden sonra bir değer girin.

DrawerState, aşağıdaki gibi open ve close işlevlerine erişim sağlar: ve geçerli çekmece durumuyla ilgili özellikleri içerir. Bu askıya alma işlemleri fonksiyonları bir CoroutineScope gerektirir. Bunu kullanarak örneklendirebilirsiniz: rememberCoroutineScope Askıya alma işlevlerini yanıt verir.

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