Menüler

Açılır menüler, kullanıcıların bir simgeyi, metin alanını veya başka bir bileşeni tıklayıp geçici bir yüzeydeki seçenekler listesinden seçim yapmasına olanak tanır. Bu kılavuzda, hem temel menülerin hem de ayırıcılar ve simgeler içeren daha karmaşık menülerin nasıl oluşturulacağı açıklanmaktadır.

Şekil 1. İki öğenin listelendiği temel bir açılır menü.

API yüzeyi

Özel bir açılır menü uygulamak için DropdownMenu, DropdownMenuItem ve IconButton bileşenlerini kullanın. DropdownMenu ve DropdownMenuItem bileşenleri menü öğelerini görüntülemek için kullanılırken IconButton, açılır menüyü görüntülemek veya gizlemek için tetikleyici görevi görür.

DropdownMenu bileşeninin temel parametreleri şunlardır:

• expanded: Menünün görünür olup olmadığını gösterir.
• onDismissRequest: Menüyü kapatmak için kullanılır.
• content: Menünün birleştirilebilir içeriği. Genellikle DropdownMenuItem birleştirilebilir öğeleri içerir.

DropdownMenuItem için temel parametreler şunlardır:

• text: Menü öğesinde gösterilen içeriği tanımlar.
• onClick: Menüdeki öğeyle etkileşimi yönetmek için geri çağırma.

Temel bir açılır menü oluşturma

Aşağıdaki snippet'te minimum DropdownMenu uygulaması gösterilmektedir:

@Composable
fun MinimalDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }
    Box(
        modifier = Modifier
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            DropdownMenuItem(
                text = { Text("Option 1") },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Option 2") },
                onClick = { /* Do something... */ }
            )
        }
    }
}
Menus.kt

Kodla ilgili önemli noktalar

• İki menü öğesi içeren temel bir DropdownMenu tanımlar.
• expanded parametresi, menünün görünürlüğünü genişletilmiş veya daraltılmış olarak kontrol eder.
• onDismissRequest parametresi, kullanıcı menüyü kapattığında yürütülen bir geri çağırma işlevini tanımlar.
• DropdownMenuItem composable'ı, açılır menüdeki seçilebilir öğeleri temsil eder.
• IconButton, menünün genişletilmesini ve daraltılmasını tetikler.

Sonuç

Şekil 2. Yalnızca iki seçenek içeren minimal bir açılır menü.

Daha uzun bir açılır menü oluşturma

Tüm menü öğeleri aynı anda gösterilemiyorsa DropdownMenu varsayılan olarak kaydırılabilir. Aşağıdaki snippet, daha uzun ve kaydırılabilir bir açılır menü oluşturur:

@Composable
fun LongBasicDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }
    // Placeholder list of 100 strings for demonstration
    val menuItemData = List(100) { "Option ${it + 1}" }

    Box(
        modifier = Modifier
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            menuItemData.forEach { option ->
                DropdownMenuItem(
                    text = { Text(option) },
                    onClick = { /* Do something... */ }
                )
            }
        }
    }
}
Menus.kt

Kodla ilgili önemli noktalar

• İçeriğinin toplam yüksekliği kullanılabilir alanı aştığında DropdownMenu kaydırılabilir. Bu kod, 100 yer tutucu öğe gösteren kaydırılabilir bir DropdownMenu oluşturur.
• forEach döngüsü, DropdownMenuItem composable'ları dinamik olarak oluşturur. Öğeler geç oluşturulmaz. Yani 100 açılır öğenin tamamı oluşturulur ve oluşturmada yer alır.
• IconButton tıklandığında DropdownMenu genişletilir ve daraltılır.
• Her DropdownMenuItem içindeki onClick lambda, kullanıcı bir menü öğesini seçtiğinde gerçekleştirilen işlemi tanımlamanıza olanak tanır.

Sonuç

Yukarıdaki kod snippet'i aşağıdaki kaydırılabilir menüyü oluşturur:

Şekil 3. Uzun, kaydırılabilir bir açılır menü.

Ayırıcılar içeren daha uzun bir açılır menü oluşturma

Aşağıdaki snippet, açılır menünün daha gelişmiş bir uygulamasını göstermektedir. Bu snippet'te, menü öğelerine başta ve sonda simgeler eklenir ve ayırıcılar menü öğesi gruplarını ayırır.

@Composable
fun DropdownMenuWithDetails() {
    var expanded by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            // First section
            DropdownMenuItem(
                text = { Text("Profile") },
                leadingIcon = { Icon(Icons.Outlined.Person, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Settings") },
                leadingIcon = { Icon(Icons.Outlined.Settings, contentDescription = null) },
                onClick = { /* Do something... */ }
            )

            HorizontalDivider()

            // Second section
            DropdownMenuItem(
                text = { Text("Send Feedback") },
                leadingIcon = { Icon(Icons.Outlined.Feedback, contentDescription = null) },
                trailingIcon = { Icon(Icons.AutoMirrored.Outlined.Send, contentDescription = null) },
                onClick = { /* Do something... */ }
            )

            HorizontalDivider()

            // Third section
            DropdownMenuItem(
                text = { Text("About") },
                leadingIcon = { Icon(Icons.Outlined.Info, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Help") },
                leadingIcon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) },
                trailingIcon = { Icon(Icons.AutoMirrored.Outlined.OpenInNew, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
        }
    }
}
Menus.kt

Bu kod, Box içinde bir DropdownMenu tanımlar.

Kodla ilgili önemli noktalar

• leadingIcon ve trailingIcon parametreleri, DropdownMenuItem öğesinin başına ve sonuna simgeler ekler.
• IconButton, menünün genişletilmesini tetikler.
• DropdownMenu, her biri seçilebilir bir işlemi temsil eden birkaç DropdownMenuItem bileşeni içerir.
• HorizontalDivider bileşenleri, menü öğesi gruplarını ayırmak için yatay bir çizgi ekler.

Sonuç

Yukarıdaki snippet, simgeler ve ayırıcılar içeren bir açılır menü oluşturur:

Şekil 4. Başında ve sonunda simgeler bulunan bölümlere ayrılmış bir açılır menü.

Ek kaynaklar

• Materyal Tasarım: Menüler