Dialog
구성요소는 팝업 메시지를 표시하거나
레이어가 있습니다. 방해가 되는 UI 환경을 생성하므로
사용자의 관심을 사로잡을 수 있습니다.
대화상자의 사용 사례는 다음과 같습니다.
- 사용자 작업 확인(예: 파일 삭제 시)
- 할 일 목록 앱에서와 같은 사용자 입력 요청
- 국가 선택과 같이 사용자 선택을 위한 옵션 목록 표시 프로필 설정입니다.
알림 대화상자
AlertDialog
컴포저블은
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 ) } } } }
이 구현은 다음과 같이 표시됩니다.
<ph type="x-smartling-placeholder">![닫기 및 확인 버튼이 모두 있는 알림 대화상자 열기](https://developer.android.google.cn/static/develop/ui/compose/images/components/dialog-alert.png?authuser=19&hl=ko)
대화상자 컴포저블
Dialog
는 기본 컴포저블로, 스타일 지정이나
미리 정의된 슬롯입니다. 비교적 간단한 컨테이너로
Card
와 같은 컨테이너로 채워야 합니다. 다음은 몇 가지
다음과 같습니다.
onDismissRequest
: 사용자가 대화상자를 닫을 때 호출되는 람다입니다.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, ) } } }
이 구현은 다음과 같이 표시됩니다. 대화상자가 열리면 그 아래의 기본 앱 콘텐츠가 어둡고 회색으로 표시됩니다.
<ph type="x-smartling-placeholder">![라벨만 포함된 대화상자입니다.](https://developer.android.google.cn/static/develop/ui/compose/images/components/dialog-minimal.png?authuser=19&hl=ko)
고급 예시
다음은 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") } } } } } }
이 구현은 다음과 같이 표시됩니다.
<ph type="x-smartling-placeholder">![빅토리아산 페더톱산의 사진이 표시된 대화상자 이미지 아래에는 닫기 버튼과 확인 버튼이 있습니다.](https://developer.android.google.cn/static/develop/ui/compose/images/components/dialog-image.png?authuser=19&hl=ko)