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.
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") } } ) }
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 ) } } } }
Bu uygulama aşağıdaki gibi görünür:
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 birDialogProperties
ö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, ) } } }
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:
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") } } } } } }
Bu uygulama aşağıdaki gibi görünür: