Dialog

Dialog bileşeni, ana uygulama içeriğinin üzerindeki bir katmanda pop-up mesajları gösterir veya kullanıcı girişi ister. Kullanıcının ilgisini çekmek için araya giren 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.
  • Kullanıcı seçimi için bir dizi seçenek (profil kurulumunda ülke seçme gibi) sunma.
Metin ve simgelerle dolu 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 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 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. 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 örnek, uyarı iletişim kutusunda biri iletişim kutusunu kapatan, diğeri ise isteğini onaylayan iki düğme uygulamaktadı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, bağımsız değişkenleri alt composable'a şu şekilde ileten bir üst composable'ı ima eder:

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

Oluşturulabilir 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 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 composable'ın temel bir uygulamasıdır. Bu paketin ikincil kapsayıcı olarak Card kullandığını unutmayın. Card olmasaydı, Text bileşeni ana uygulama içeriğinin üstünde tek başına görünürdü.

@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 koyu renk ve devre dışı göründüğünü unutmayın:

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

Gelişmiş örnek

Aşağıda, Dialog composable'ın daha gelişmiş bir uygulanmış hali 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