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