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.

İki seçeneğin gösterildiği bir açılır menü. Üç dikey nokta içeren simge, tıklandığında menünün açılacağını gösterir.
1. şekil. İ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österme veya gizleme tetikleyicisidir.

DropdownMenu bileşeninin temel parametreleri şunlardır:

  • expanded: Menünün görünür olup olmadığını belirtir.
  • onDismissRequest: Menü kapatma işlemini yapmak için kullanılır.
  • content: Menünün birleştirilebilir içeriği. Genellikle DropdownMenuItem birleştirilebilir öğeler 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, 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 yürütülen bir geri çağırmayı 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ç

Üç dikey noktalı bir simgeyle tetiklenen açılır menü. Menüde iki seçilebilir seçenek gösterilir: Seçenek 1 ve Seçenek 2.
Ş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ö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 composables'ı dinamik olarak oluşturur. Öğeler geç oluşturulmaz. Bu nedenle, 100 açılır liste öğesinin tümü oluşturulur ve kompozisyonda yer alır.
  • IconButton tıklandığında DropdownMenu genişletme ve daraltma işlemlerini tetikler.
  • Her onClick içindeki DropdownMenuItem, kullanıcı bir menü öğesini 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:

Birçok seçeneğin bulunduğu ve tüm öğeleri görüntülemek için kaydırma yapılması gereken bir açılır menü.
3.şekil Uzun ve kaydırılabilir bir açılır menü.

Ayraçlarla 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ştaki ve sondaki 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 başlangıcına ve sonuna simgeler ekler.
  • IconButton simgesi, menünün genişlemesini tetikler.
  • DropdownMenu, her biri seçilebilir bir işlemi temsil eden çeşitli DropdownMenuItem composables içerir.
  • HorizontalDivider composable'ları, 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:

Profil, Ayarlar, Geri Bildirim Gönder, Hakkında ve Yardım bölümlerini içeren bir açılır menü. Her seçeneğin bir simgesi vardır (ör. Profil için kişi simgesi).
Şekil 4. Ön ve son simgelerle bölümlere ayrılmış bir açılır menü.

Ek kaynaklar