Hộp thoại

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 hành động 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ình 1. Ví dụ về hộp thoại chứa văn bản và biểu tượng.

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 hộp thoại theo chủ đề Material Design. AlertDialog có các tham số cụ thể để xử lý các phần tử cụ thể của hộp thoại. Trong số đó 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 hộp thoại.
• 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.

@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

Cách triển khai này ngụ ý một thành phần kết hợp mẹ truyền đố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
                )
            }
        }
    }
}
Dialog.kt

Phương thức triển khai có dạng như sau:

Hình 2. Hộp thoại cảnh báo có các nút.

Lưu ý: Khi người dùng nhấp vào một trong các nút, hộp thoại sẽ đóng lại. Khi người dùng nhấp vào xác nhận, hàm này sẽ gọi một hàm cũng xử lý việc xác nhận. Ngang bằng ví dụ này có các hàm onDismissRequest() và onConfirmRequest().

Lưu ý: Trong trường hợp hộp thoại yêu cầu một tập hợp nút phức tạp hơn, bạn có thể hưởng lợi từ việc sử dụng thành phần kết hợp Dialog và điền sẵn thành phần này ở dạng tự do hơn .

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 mà bạn nên điền sẵn bằng một vùng chứa như Card. Sau đây là một số 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ủa DialogProperties cung cấp một số phạm vi bổ sung để tuỳ chỉnh.

Thận trọng: Không giống như ví dụ về AlertDialog trong phần trước, bạn cần để chỉ định kích thước và hình dạng của Dialog theo cách thủ công. Bạn cũng cần cung cấp một vùng chứa bên trong.

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. Xin lưu ý rằng lớp này sử dụng Card làm vùng chứa phụ. Nếu không có Card, thành phần Text sẽ xuất hiện riêng lẻ 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,
            )
        }
    }
}
Dialog.kt

Phương thức triển khai này có dạng như sau. Xin lưu ý rằng khi hộp thoại đang 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ình 3. Hộp thoại tối giản.

Ví dụ nâng cao

Sau đây là 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.

Thận trọng: Nếu chỉ cần hiển thị hộp thoại hai nút như trong ví dụ này, bạn nên sử dụng AlertDialog và API thuận tiện hơn. Tuy nhiên, nếu muốn tạo một hộp thoại phức tạp hơn, có thể có các biểu mẫu và nhiều nút, bạn nên sử dụng Dialog với nội dung tuỳ chỉnh, như trong ví dụ sau.

@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

Phương thức triển khai có dạng như sau:

Hình 4. Hộp thoại có chứa hình ảnh.

Tài nguyên khác

• Tài liệu về giao diện người dùng Material