이 페이지는 Cloud Translation API를 통해 번역되었습니다.

대화상자

Dialog 구성요소는 팝업 메시지를 표시하거나 레이어가 있습니다. 방해가 되는 UI 환경을 생성하므로 사용자의 관심을 사로잡을 수 있습니다.

대화상자의 사용 사례는 다음과 같습니다.

파일 삭제와 같은 사용자 작업 확인
할 일 목록 앱에서와 같은 사용자 입력 요청
국가 선택과 같이 사용자 선택을 위한 옵션 목록 표시 프로필 설정입니다.

알림 대화상자

AlertDialog 컴포저블은 Material Design 테마 대화상자 AlertDialog에는 다음에 대한 특정 매개변수가 있습니다. 처리할 수 있습니다. 여기에는 다음이 포함됩니다.

title: 대화상자 상단에 표시되는 텍스트입니다.
text: 대화상자 중앙에 표시되는 텍스트입니다.
icon: 대화상자 상단에 표시되는 그래픽입니다.
onDismissRequest: 사용자가 대화상자를 닫을 때 호출되는 함수입니다. 외부를 탭해 봐.
dismissButton: 닫기 버튼 역할을 하는 컴포저블입니다.
confirmButton: 확인 버튼 역할을 하는 컴포저블입니다.

다음 예에서는 알림 대화상자에 두 개의 버튼을 구현합니다. 하나는 대화상자를 닫고 다른 하나는 요청을 확인합니다.

@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")
            }
        }
    )
}Dialog.kt

이 구현은 하위 컴포저블을 사용할 수 있습니다.

@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
                )
            }
        }
    }
}Dialog.kt

이 구현은 다음과 같이 표시됩니다.

닫기 및 확인 버튼이 모두 있는 알림 대화상자 열기 — **그림 2.** 버튼이 있는 알림 대화상자

대화상자 컴포저블

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,
            )
        }
    }
}Dialog.kt

이 구현은 다음과 같이 표시됩니다. 대화상자가 열리면 그 아래의 기본 앱 콘텐츠가 어둡고 회색으로 표시됩니다.

고급 예시

다음은 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")
                    }
                }
            }
        }
    }
}Dialog.kt

이 구현은 다음과 같이 표시됩니다.

빅토리아산 페더톱산의 사진이 표시된 대화상자 이미지 아래에는 닫기 버튼과 확인 버튼이 있습니다. — **그림 4.** 이미지가 포함된 대화상자

추가 리소스

Material UI 문서