Dialog

Dialog bileşeni, ana uygulama içeriğinin üstündeki bir katmanda pop-up mesajlar gösterir veya kullanıcıdan giriş ister. Kullanıcıların dikkatini çekmek için kesintiye uğratan bir kullanıcı arayüzü deneyimi oluşturur.

Diyalog 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 bileşeni, Material Design temalı bir iletişim kutusu oluşturmak için kullanışlı bir API sağlar. AlertDialog, iletişim kutusunun belirli öğelerini işlemek için özel parametrelere sahiptir. Bunlardan bazıları şunlardır:

  • title: İletişim kutusunun üst kısmında görünen metin.
  • text: İletişim kutusunun ortasında 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 composable.
  • confirmButton: Onay düğmesi işlevi gören bir composable.

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.

Diyalog derlenebilir

Dialog, içerik için herhangi bir stil veya önceden tanımlanmış yuva sağlamayan temel bir bileşendir. Card gibi bir kapsayıcıyla doldurmanız gereken nispeten basit bir kapsayıcıdır. Bir iletişim kutusunun 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 bileşeninin temel bir uygulamasıdır. Bu paketin ikincil kapsayıcı olarak Card kullandığını unutmayın. Card olmadan Text bileşeni, ana uygulama içeriğinin üstünde 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.

İleri düzey ö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:

Viktorya'daki Tüy Dağı'nın fotoğrafının yer aldığı iletişim kutusu. Resmin altında kapatma düğmesi ve onaylama düğmesi var.
Şekil 4. Resim içeren bir iletişim kutusu.

Ek kaynaklar