Dialog

Dialog bileşeni, pop-up mesajları gösterir veya katmana ekleyin. Kullanıcıların dikkatini çekmek için kesintiye uğratan bir kullanıcı arayüzü deneyimi oluşturur.

İletişim kutularının kullanım alanları arasında şunlar yer alır:

  • Kullanıcı işlemini onaylama (ör. dosyayı silme).
  • Yapılacaklar listesi uygulamasında olduğu gibi, kullanıcı girişi isteme.
  • Profil kurulumunda ülke seçme gibi kullanıcı seçimi için seçeneklerin listesini sunma
Metin ve simgelerle doldurulmuş bir iletişim kutusu.
Şekil 1. Metin ve simgelerle doldurulmuş bir iletişim kutusu örneği.

Uyarı iletişim kutusu

AlertDialog composable, bir Materyal Tasarım temalı iletişim kutusu. AlertDialog, iletişim kutusunun belirli öğelerini ele alma. Bunlardan bazıları şunlardır:

  • title: İletişim kutusunun üst kısmında görünen metin.
  • text: İletişim kutusunda ortalanmış olarak görünen metin.
  • icon: İletişim kutusunun üst kısmında görünen grafik.
  • onDismissRequest: Kullanıcı iletişim kutusunu kapattığında (ör. iletişim kutusunun dışına dokunarak) çağrılan işlev.
  • dismissButton: Kapatma düğmesi işlevi gören bir kompozisyon.
  • confirmButton: Onay düğmesi olarak kullanılan bir bileşen.

Aşağıdaki örnekte, bir uyarı iletişim kutusunda iki düğme uygulanmaktadır. Bunlardan biri iletişim kutusunu kapatırken diğeri isteği onaylar.

@Composable
fun AlertDialogExample(
    onDismissRequest: () -> Unit,
    onConfirmation: () -> Unit,
    dialogTitle: String,
    dialogText: String,
    icon: ImageVector,
) {
    AlertDialog(
        icon = {
            Icon(icon, contentDescription = "Example Icon")
        },
        title = {
            Text(text = dialogTitle)
        },
        text = {
            Text(text = dialogText)
        },
        onDismissRequest = {
            onDismissRequest()
        },
        confirmButton = {
            TextButton(
                onClick = {
                    onConfirmation()
                }
            ) {
                Text("Confirm")
            }
        },
        dismissButton = {
            TextButton(
                onClick = {
                    onDismissRequest()
                }
            ) {
                Text("Dismiss")
            }
        }
    )
}
Dialog.kt

Bu uygulama, alt composable'a şu şekilde bağımsız değişkenler aktaran bir üst composable içerir:

@Composable
fun DialogExamples() {
    // ...
    val openAlertDialog = remember { mutableStateOf(false) }

    // ...
        when {
            // ...
            openAlertDialog.value -> {
                AlertDialogExample(
                    onDismissRequest = { openAlertDialog.value = false },
                    onConfirmation = {
                        openAlertDialog.value = false
                        println("Confirmation registered") // Add logic here to handle confirmation.
                    },
                    dialogTitle = "Alert dialog example",
                    dialogText = "This is an example of an alert dialog with buttons.",
                    icon = Icons.Default.Info
                )
            }
        }
    }
}
Dialog.kt

Bu uygulama aşağıdaki gibi görünür:

Hem kapatma hem de onay düğmesi bulunan açık bir uyarı iletişim kutusu.
Şekil 2. Düğmeler içeren bir uyarı iletişim kutusu.

Oluşturulabilir iletişim kutusu

Dialog, herhangi bir stil veya tasarım özellikleri sunmayan temel bir composable'dır. önceden tanımlanmış içerik alanları. Bu, nispeten basit bir kapsayıcıdır. Card gibi bir kapsayıcıyla doldurmanız gerekir. Bir diyaloğun temel parametrelerinden bazıları şunlardır:

  • onDismissRequest: Kullanıcı iletişim kutusunu kapattığında çağrılan lambda.
  • properties: Özelleştirme için ek kapsam sağlayan bir DialogProperties örneği.

Temel örnek

Aşağıdaki örnek, Dialog composable'ın temel bir uygulamasıdır. İkincil kapsayıcı olarak Card kullanıldığını unutmayın. Card olmadan Text bileşeni, ana uygulama içeriğinin üzerinde tek başına görünür.

@Composable
fun MinimalDialog(onDismissRequest: () -> Unit) {
    Dialog(onDismissRequest = { onDismissRequest() }) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .padding(16.dp),
            shape = RoundedCornerShape(16.dp),
        ) {
            Text(
                text = "This is a minimal dialog",
                modifier = Modifier
                    .fillMaxSize()
                    .wrapContentSize(Alignment.Center),
                textAlign = TextAlign.Center,
            )
        }
    }
}
Dialog.kt

Bu uygulama aşağıdaki gibi görünür. İletişim kutusu açıkken, altındaki ana uygulama içeriğinin karartılmış ve devre dışı göründüğünü unutmayın:

Yalnızca etiket içeren bir iletişim kutusu.
Şekil 3. Minimum iletişim.

Gelişmiş örnek

Aşağıda, Dialog bileşeninin daha gelişmiş bir uygulaması verilmiştir. Bu durumda bileşen, yukarıdaki AlertDialogörneğine benzer bir arayüzü manuel olarak uygular.

@Composable
fun DialogWithImage(
    onDismissRequest: () -> Unit,
    onConfirmation: () -> Unit,
    painter: Painter,
    imageDescription: String,
) {
    Dialog(onDismissRequest = { onDismissRequest() }) {
        // Draw a rectangle shape with rounded corners inside the dialog
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .height(375.dp)
                .padding(16.dp),
            shape = RoundedCornerShape(16.dp),
        ) {
            Column(
                modifier = Modifier
                    .fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                Image(
                    painter = painter,
                    contentDescription = imageDescription,
                    contentScale = ContentScale.Fit,
                    modifier = Modifier
                        .height(160.dp)
                )
                Text(
                    text = "This is a dialog with buttons and an image.",
                    modifier = Modifier.padding(16.dp),
                )
                Row(
                    modifier = Modifier
                        .fillMaxWidth(),
                    horizontalArrangement = Arrangement.Center,
                ) {
                    TextButton(
                        onClick = { onDismissRequest() },
                        modifier = Modifier.padding(8.dp),
                    ) {
                        Text("Dismiss")
                    }
                    TextButton(
                        onClick = { onConfirmation() },
                        modifier = Modifier.padding(8.dp),
                    ) {
                        Text("Confirm")
                    }
                }
            }
        }
    }
}
Dialog.kt

Bu uygulama aşağıdaki gibi görünür:

Victoria, Feathertop Dağı'nın fotoğrafının yer aldığı bir iletişim kutusu. Görüntünün altında bir kapat düğmesi ve bir onay düğmesi bulunur.
Şekil 4. Resim içeren bir iletişim kutusu.

Ek kaynaklar