대화상자

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

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

  • 파일 삭제와 같은 사용자 작업 확인
  • 할 일 목록 앱과 같이 사용자 입력을 요청합니다.
  • 프로필 설정에서 국가를 선택하는 것과 같이 사용자가 선택할 수 있는 옵션 목록을 표시합니다.
텍스트와 아이콘으로 채워진 대화상자
그림 1. 텍스트와 아이콘으로 채워진 대화상자의 예

알림 대화상자

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

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

<ph type="x-smartling-placeholder">
</ph> 라벨만 포함된 대화상자입니다.
그림 3. 최소 대화상자

고급 예시

다음은 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. 이미지가 포함된 대화상자

추가 리소스