İletişim Kutusu

Dialog bileşeni, ana uygulama içeriğinin üstündeki bir katmanda iletişim kutusu mesajlarını gösterir veya kullanıcıdan giriş ister. Kullanıcının dikkatini çekmek için kesintili bir kullanıcı arayüzü deneyimi oluşturur.

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

• Kullanıcı işlemini onaylama (ör. dosya silme)
• Yapılacaklar listesi uygulaması gibi kullanıcı girişi gerektiren durumlar.
• Kullanıcının seçebileceği seçeneklerin listesini sunma (ör. profil oluştururken ülke seçme)

Şekil 1. Metin ve simgelerle doldurulmuş bir iletişim kutusu örneği.

Uyarı iletişim kutusu

AlertDialog composable'ı, Materyal Tasarım 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 kutusunda ortalanmış olarak görünen metin.
• icon: İletişim kutusunun üst kısmında görünen grafik.
• onDismissRequest: Kullanıcı, iletişim kutusunun dışına dokunarak iletişim kutusunu kapattığında çağrılan işlev.
• dismissButton: Kapatma düğmesi olarak kullanılan bir composable.
• confirmButton: Onay düğmesi olarak kullanılan bir composable.

Aşağıdaki örnekte, bir uyarı iletişim kutusunda iki düğme uygulanmaktadır. Bu düğmelerden biri iletişim kutusunu kapatır, diğeri ise isteğini 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, bağımsız değişkenleri alt composable'a şu şekilde ileten bir üst composable'ı ifade 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:

Şekil 2. Düğmeler içeren bir uyarı iletişim kutusu.

Not: Kullanıcı düğmelerden birini tıkladığında iletişim kutusu kapanır. Kullanıcı onayla düğmesini tıkladığında, onayı da işleyen bir işlev çağrılır. Bu örnekte bu işlevler onDismissRequest() ve onConfirmRequest()'dir.

Not: İletişim kutunuzda daha karmaşık bir düğme grubu gerekiyorsa Dialog composable'ı kullanıp daha serbest biçimli bir şekilde doldurabilirsiniz.

Dialog composable

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 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.

Dikkat: Önceki bölümde verilen AlertDialog örneğinin aksine, Dialog boyutunu ve şeklini manuel olarak belirtmeniz gerekir. Ayrıca bir iç kap da sağlamanız gerekir.

Temel örnek

Aşağıdaki örnek, Dialog composable'ın temel bir uygulamasıdır. İkincil kapsayıcı olarak Card kullandığı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 gri renkte göründüğünü unutmayın:

Şekil 3. Minimalist iletişim kutusu.

İleri düzey örnek

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

Dikkat: Bu örnekte olduğu gibi yalnızca iki düğmeli bir iletişim kutusu göstermeniz gerekiyorsa AlertDialog ve daha kullanışlı API'sini kullanmanız gerekir. Ancak formlar ve birden fazla düğme içeren daha karmaşık bir iletişim kutusu oluşturmak istiyorsanız aşağıdaki örnekte olduğu gibi özel içerikli Dialog kullanmanız gerekir.

@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:

Şekil 4. Resim içeren bir iletişim kutusu.

Ek kaynaklar

• Material UI belgeleri