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).
  • Yapılacaklar listesi uygulamasında olduğu gibi, kullanıcı girişi isteme.
  • Kullanıcı seçimi için bir dizi seçenek (ör. ülke seçimi) profil kurulumu.
ziyaret edin.
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.

@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, 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.
ziyaret edin.

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: Bazı DialogProperties örnekleri ek özelleştirme kapsamı sunuyor.
ziyaret edin.

Temel örnek

Aşağıdaki örnek, Dialog composable'ın temel bir uygulamasıdır. Not kapsayıcı olarak bir 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çı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