Dialog
元件會顯示彈出式訊息,或要求使用者輸入
位於主要應用程式內容上方這樣會導致幹擾性的 UI 體驗
吸引觀眾的注意
以下是對話方塊的用途:
- 確認使用者動作,例如刪除檔案時。
- 要求使用者輸入內容,例如在待辦事項清單應用程式中。
- 顯示使用者選項清單,例如在清單中選擇國家/地區 也可建立設定檔
快訊對話方塊
AlertDialog
可組合函式提供便利的 API,可用來建立
Material Design 主題對話方塊。AlertDialog
具有專用參數
處理對話方塊的特定元素。包括:
title
:顯示在對話方塊頂端的文字。text
:顯示在對話方塊中央的文字。icon
:顯示在對話方塊頂端的圖片。onDismissRequest
:使用者關閉對話方塊時呼叫的函式。 例如在外碰觸碰dismissButton
:做為關閉按鈕的可組合函式。confirmButton
:做為確認按鈕的可組合函式。
以下範例會在快訊對話方塊中實作兩個按鈕, 關閉對話方塊,另一個則確認其要求。
@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") } } ) }
此實作會隱含將引數傳遞至 子項可組合項目:
@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 ) } } } }
實作內容如下所示:
![開啟的快訊對話方塊,其中含有關閉和確認按鈕。](https://developer.android.com/static/develop/ui/compose/images/components/dialog-alert.png?authuser=0000&hl=zh-tw)
對話方塊可組合函式
Dialog
是基本的可組合項,不提供任何樣式或
預先定義的版位這個容器相對簡單
您應該填入 Card
之類的容器。以下是
對話方塊的主要參數:
onDismissRequest
:使用者關閉對話方塊時呼叫的 lambda。properties
:提供DialogProperties
的例項,藉此提供一些 自訂範圍
基本範例
以下範例為 Dialog
可組合項的基本實作。注意事項
以 Card
做為次要容器如果沒有 Card
,Text
則會顯示在主要應用程式內容上方。
@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, ) } } }
實作內容如下所示。請注意,對話方塊開啟時, 主應用程式內容下方則會變暗並顯示為灰色:
![僅包含標籤的對話方塊。](https://developer.android.com/static/develop/ui/compose/images/components/dialog-minimal.png?authuser=0000&hl=zh-tw)
進階範例
以下是實作 Dialog
可組合項的進階實作。在本
情況下,元件會手動實作與 AlertDialog
類似的介面
範例。
@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") } } } } } }
實作內容如下所示:
![一張對話方塊顯示維多利亞山的 Feathertop。圖片下方是關閉按鈕和確認按鈕。](https://developer.android.com/static/develop/ui/compose/images/components/dialog-image.png?authuser=0000&hl=zh-tw)