Thành phần Dialog
hiển thị thông báo bật lên hoặc yêu cầu hoạt động đầu vào của người dùng trên
lớp phía trên nội dung chính của ứng dụng. Điều này tạo ra trải nghiệm giao diện người dùng gián đoạn
thu hút sự chú ý của người dùng.
Sau đây là các trường hợp sử dụng hộp thoại:
- Xác nhận thao tác của người dùng, chẳng hạn như khi xoá tệp.
- Yêu cầu hoạt động đầu vào của người dùng, chẳng hạn như trong ứng dụng danh sách việc cần làm.
- Trình bày danh sách các lựa chọn để người dùng lựa chọn, chẳng hạn như chọn quốc gia tại thiết lập hồ sơ.
Hộp thoại thông báo
Thành phần kết hợp AlertDialog
cung cấp một API thuận tiện để tạo một
Hộp thoại theo chủ đề Material Design. AlertDialog
có các thông số cụ thể cho
xử lý các phần tử cụ thể của hộp thoại. Trong đó có:
title
: Văn bản xuất hiện dọc theo đầu hộp thoại.text
: Văn bản xuất hiện ở giữa hộp thoại.icon
: Hình ảnh xuất hiện ở đầu hộp thoại.onDismissRequest
: Hàm được gọi khi người dùng đóng hộp thoại, chẳng hạn như bằng cách nhấn vào bên ngoài video.dismissButton
: Một thành phần kết hợp đóng vai trò là nút đóng.confirmButton
: Một thành phần kết hợp đóng vai trò là nút xác nhận.
Ví dụ sau đây triển khai hai nút trong hộp thoại cảnh báo, một nút loại bỏ hộp thoại và một hộp thoại khác xác nhận yêu cầu.
@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") } } ) }
Cách triển khai này ngụ ý một thành phần kết hợp mẹ sẽ truyền các đối số đến thành phần kết hợp con theo cách sau:
@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ương thức triển khai có dạng như sau:
![Một hộp thoại cảnh báo đang mở có cả nút đóng và xác nhận.](https://developer.android.google.cn/static/develop/ui/compose/images/components/dialog-alert.png?authuser=9&hl=vi)
Thành phần kết hợp của hộp thoại
Dialog
là một thành phần kết hợp cơ bản không cung cấp kiểu hoặc
các vị trí định sẵn cho nội dung. Đây là một vùng chứa tương đối đơn giản,
bạn nên điền sẵn một vùng chứa như Card
. Sau đây là một số
các tham số chính của hộp thoại:
onDismissRequest
: Hàm lambda được gọi khi người dùng đóng hộp thoại.properties
: Một thực thể củaDialogProperties
cung cấp một số phạm vi bổ sung để tuỳ chỉnh.
Ví dụ cơ bản
Ví dụ sau đây là cách triển khai cơ bản của thành phần kết hợp Dialog
. Ghi chú
sử dụng Card
làm vùng chứa phụ. Nếu không có Card
, Text
sẽ xuất hiện một mình phía trên nội dung chính của ứng dụng.
@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ương thức triển khai có dạng như sau. Xin lưu ý rằng khi hộp thoại mở, nội dung ứng dụng chính bên dưới nội dung này bị tối đi và chuyển sang màu xám:
![Hộp thoại không chứa gì khác ngoài nhãn.](https://developer.android.google.cn/static/develop/ui/compose/images/components/dialog-minimal.png?authuser=9&hl=vi)
Ví dụ nâng cao
Sau đây là một cách triển khai nâng cao hơn của thành phần kết hợp Dialog
. Trong phần này
trường hợp này, thành phần này sẽ triển khai giao diện tương tự như AlertDialog
theo cách thủ công
ví dụ ở trên.
@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ương thức triển khai có dạng như sau:
![Một hộp thoại có ảnh chụp Núi Feathertop, Victoria. Bên dưới hình ảnh là nút đóng và nút xác nhận.](https://developer.android.google.cn/static/develop/ui/compose/images/components/dialog-image.png?authuser=9&hl=vi)