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">
대화상자 컴포저블
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">
고급 예시
다음은 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">