Dialog

Dialog bileşeni, pop-up mesajları gösterir veya katmana ekleyin. Kesintilere neden olan bir kullanıcı arayüzü deneyimi dikkatlerini çekin.

Diyalog kullanım alanları arasında şunlar yer alır:

  • Kullanıcı işlemini onaylama (ör. dosyayı silme).
  • Kullanıcıdan giriş isteğinde bulunma (ör. yapılacaklar listesi uygulamasında)
  • Kullanıcı seçimi için bir dizi seçenek (ör. ülke seçimi) profil kurulumu.
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, 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 çağrılan işlev örneğin dışına dokunarak erişebilirsiniz.
  • dismissButton: Kapatma düğmesi işlevi gören bir composable.
  • confirmButton: Onay düğmesi işlevi gören bir composable.

Aşağıdaki örnekte, uyarı iletişim kutusunda biri iletişim kutusunu kapatır, diğeri de 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, argümanları alt öğe composable'ı oluşturur:

@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, 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. Bu proje yönetiminde iletişim kutusunun temel parametrelerine bakalım:

  • 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 ü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çıldığında altındaki ana uygulama içeriği koyu ve gri görünür:

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. Burada durumda, bileşen AlertDialog uygulamasına benzer bir arayüzü manuel olarak uygular yukarıdaki örneğe bakın.

Dialog 

@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