Menüler

Açılır menüler, kullanıcıların bir simgeyi, metin alanını veya başka bir bileşeni tıklamasını ve ardından geçici bir yüzeydeki seçenekler listesinden seçim yapmasını sağlar. Bu kılavuzda, hem temel menülerin hem de bölücü ve simge 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östermek veya gizlemek için tetikleyicidir.

DropdownMenu bileşeninin temel parametreleri şunlardır:

• expanded: Menünün görünür olup olmadığını belirtir.
• onDismissRequest: Menünün kapatılmasını işlemek için kullanılır.
• content: Menünün, genellikle DropdownMenuItem bileşenleri içeren bileşen içeriği.

DropdownMenuItem için temel parametreler şunlardır:

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

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

Aşağıdaki snippet, minimum DropdownMenu uygulamasını göstermektedir:

@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 genişletilmiş veya daraltılmış olarak görünürlüğünü kontrol eder.
• onDismissRequest parametresi, kullanıcı menüyü kapattığında çalıştırılacak bir geri çağırma işlevi tanımlar.
• DropdownMenuItem bileşeni, 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çeneğin bulunduğu minimal bir açılır menü.

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

Tüm menü öğeleri aynı anda görüntülenemiyorsa 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 bileşenlerini dinamik olarak oluşturur. Öğeler, ertelenmiş olarak oluşturulmaz. Yani 100 açılır öğenin tümü oluşturulur ve kompozisyonda bulunur.
• IconButton, tıklandığında DropdownMenu öğesinin genişletilmesini ve daraltılmasını tetikler.
• Her DropdownMenuItem içindeki onClick lambda, kullanıcı bir menü öğesi seçtiğinde gerçekleştirilen işlemi tanımlamanıza olanak tanır.

Sonuç

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

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

Bölmelerle daha uzun bir açılır menü oluşturma

Aşağıdaki snippet'te, açılır menünün daha gelişmiş bir uygulaması gösterilmektedir. Bu snippet'te, menü öğelerine başlangıç ve bitiş simgeleri 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 simge 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ç

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

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

Ek kaynaklar

• Materyal Tasarım: Menüler