Dialog

Dialog 是一種用來顯示臨時彈出視窗的 UI 元件，通常用來向使用者顯示重要資訊、要求輸入或提供多種操作選項。它會暫時疊加在其他內容上，直到使用者關閉它或進行選擇，並會中斷當前的畫面互動，但不會影響背景 UI 的顯示或行為，適合顯示提示訊息或操作確認。

Jetpack Compose 有提供AlertDialog，可用來快速建立 Material Design 主題的Dialog。

@Composable
fun Greeting(dialogTitle: String, dialogText: String, modifier: Modifier = Modifier) {
    AlertDialog(
        icon = {
            Icon(Icons.Filled.CheckCircle, contentDescription = "Example Icon")
        },
        title = {
            Text(
                text = dialogTitle,
                fontSize = 40.sp
            )
        },
        text = {
            Text(text = dialogText)
        },
        onDismissRequest = {
            // 使用者關閉對話方塊時 (例如輕觸對話方塊外部區域) 呼叫
        },
        confirmButton = {
            TextButton(
                onClick = {}
            ) {
                Text("確認")
            }
        },
        dismissButton = {
            TextButton(
                onClick = {}
            ) {
                Text("取消")
            }
        }
    )
}

CustomDialog

如果說不用預設的AlertDialog 想要客製化Dialog可以直接使用Dialog。

@Composable
fun CustomDialogComposable(modifier: Modifier = Modifier) {
    Dialog(
        onDismissRequest = {}
    ) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .padding(16.dp),
            shape = RoundedCornerShape(16.dp),
        ) {
            Column(

                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = modifier
                    .fillMaxWidth()
                    .fillMaxHeight()
                    .padding(16.dp)
            ) {
                Text(
                    text = "Title",
                    modifier = modifier.padding(16.dp)
                )
                Text(
                    text = "內容",
                    textAlign = TextAlign.Center,
                    modifier = modifier.fillMaxWidth(),
                )
                Row(
                    horizontalArrangement = Arrangement.Center,
                    modifier = modifier.fillMaxWidth()
                ) {
                    TextButton (
                        onClick = {}
                    ) {
                        Text("確認")
                    }
                    TextButton(
                        onClick = {}
                    ) {
                        Text("確認")
                    }
                }
            }
        }
    }
}