Dialog

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

İletişim kutularının kullanım alanlarından bazıları şunlardır:

  • Kullanıcının yaptığı işlemi onaylama (ör. dosya silme).
  • Yapılacaklar listesi uygulamasında olduğu gibi kullanıcı girişi isteme.
  • Profil ayarlarında ülke seçme gibi kullanıcı seçimi için seçeneklerin listesini sunar.
Metin ve simgelerle doldurulan bir iletişim kutusu.
Şekil 1. Metin ve simgelerle doldurulan bir iletişim kutusu örneği.

Uyarı iletişim kutusu

AlertDialog composable, Materyal Tasarım temalı iletişim kutusu oluşturmak için kullanışlı bir API sunar. AlertDialog, iletişim kutusunun belirli öğelerini işlemek için belirli 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. dışına dokunarak) çağrılan işlev.
  • dismissButton: Kapatma düğmesi olarak işlev gören bir composable.
  • confirmButton: Onay düğmesi görevi gören bir composable.

Aşağıdaki örnekte, bir uyarı iletişim kutusuna biri iletişim kutusunu kapatan, diğeriyse isteği onaylayan iki düğme uygulanmaktadır.

@OptIn(ExperimentalMaterial3Api::class)
@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 geçiren bir üst composable anlamına gelir:

@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 kapat hem de onay düğmesi bulunan açık bir uyarı iletişim kutusu.
Şekil 2. Düğmeler içeren bir uyarı iletişim kutusu.

composable iletişim kutusu

Dialog, içerik için herhangi bir stil veya önceden tanımlanmış alan sağlamayan temel bir composable'dır. Card gibi bir container ile doldurmanız gereken nispeten basit bir container'dır. İletişim kutusunun temel parametrelerinden bazıları aşağıda verilmiştir:

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

Temel örnek

Aşağıdaki örnek, Dialog composable'ın temel uygulamasıdır. Bu API'nin ikincil kapsayıcı olarak bir Card kullandığını unutmayın. Card olmadığında 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çıldığında altındaki ana uygulama içeriğinin daha koyu ve gri göründüğünü unutmayın:

Etiketten başka hiçbir şey içermeyen iletişim kutusu.
Şekil 3. Minimum iletişim kutusu.

Gelişmiş örnek

Aşağıda, Dialog composable'ın daha gelişmiş bir uygulaması bulunmaktadır. 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'daki Feathertop Dağı'nın fotoğrafının bulunduğu diyalog. Resmin altında bir kapatma ve onaylama düğmesi bulunur.
Şekil 4. Resim içeren bir iletişim kutusu.

Ek kaynaklar